Живой поиск. JavaScript

04 апреля 2022, 19:00

Доброго времени суток!

Есть небольшая задачка:

Существует некий список контактов (по типу как в смартфоне), где изначально пользователь видит весь список, а когда вводит что-то в поиск - остаються только подходящие варианты.

В данном случае это массив из 8 объектов у которых есть атрибуты name и email.

const DATA = [
{
    name: 'Petro',
    email: "airborne@gmail.com"
}, {
    name: 'Ivan',
    email: "trololo@gmail.com"
}, {
    name: 'Igor',
    email: "klubnicka@gmail.com"
}, {
    name: 'Anton',
    email: "anton1113@yahooey.com"
}, {
    name: 'Pavlo',
    email: "poilkj@i.com"
}, {
    name: 'Volo',
    email: "iiuummn@ru.com"
},{
    name: 'Ira',
    email: "piuy@gmail.com"
}, {
    name: 'Eduard',
    email: "nghtyy@gmail.com"
}];

Я вывел список на экран, но при поиске у меня не возвращает результат. Не знаю что делаю не так.

Помогите разобраться, пожалуйста. Заранее спасибо=)

const DATA = [ 
    { 
        name: 'Petro', 
        email: "airborne@gmail.com" 
    }, { 
        name: 'Ivan', 
        email: "trololo@gmail.com" 
    }, { 
        name: 'Igor', 
        email: "klubnicka@gmail.com" 
    }, { 
        name: 'Anton', 
        email: "anton1113@yahooey.com" 
    }, { 
        name: 'Pavlo', 
        email: "poilkj@i.com" 
    }, { 
        name: 'Volo', 
        email: "iiuummn@ru.com" 
    },{ 
        name: 'Ira', 
        email: "piuy@gmail.com" 
    }, { 
        name: 'Eduard', 
        email: "nghtyy@gmail.com" 
    } 
]; 
 
let userProf = '<ul>'; 
for (let i = 0; i < DATA.length; i++) { 
  userProf += "<li class='list'>" + "<h2>" + DATA[i].name + "</h2>" + 
    "<p>" + DATA[i].email + "</p>" + "</li>"; 
} 
document.getElementById("result").innerHTML = userProf; 
 
document.getElementById('search').onkeyup = function() { 
  document.getElementById('result').innerHTML = ''; 
  let stringLength = this.value.length; 
  if (stringLength > 1) { 
    for (let i = 0; i < DATA.length; i++) { 
      let userName = DATA[i].name.split('').slice(0, stringLength).join(''); 
      let userEmail = DATA[i].email.split('').slice(0, stringLength).join(''); 
      if (userName && userEmail === this.value) { 
        document.getElementById('result').innerHTML += "<li class='list'>" + "<h2>" + DATA[i].name + "</h2>" + 
          "<p>" + DATA[i].email + "</p>" + "</li>"; 
      } 
    } 
  } else { 
    document.getElementById("result").innerHTML = userProf; 
  } 
};

#result{ 
    width:175px; 
} 
input { 
    margin-bottom: 20px; 
} 
ul { 
    padding: 0; 
    margin: 0; 
} 
.list { 
    padding: 10px; 
    margin-bottom: 20px; 
    background: #cdcdcd; 
    box-shadow:0 0 6px 0 rgba(0,0,0,0.5); 
    border-radius: 6px; 
} 
.list:hover{ 
    background:#f5f5f5; 
    cursor:pointer; 
}

<input type='text' id='search' placeholder="friendly list" autocomplete='off'> 
<div id='result'></div>

Answer 1

Не "и" &&, а "или" ||:

if (userName == searchText || userEmail == searchText) {

const DATA = [ 
    { 
        name: 'Petro', 
        email: "airborne@gmail.com" 
    }, { 
        name: 'Ivan', 
        email: "trololo@gmail.com" 
    }, { 
        name: 'Igor', 
        email: "klubnicka@gmail.com" 
    }, { 
        name: 'Anton', 
        email: "anton1113@yahooey.com" 
    }, { 
        name: 'Pavlo', 
        email: "poilkj@i.com" 
    }, { 
        name: 'Volo', 
        email: "iiuummn@ru.com" 
    },{ 
        name: 'Ira', 
        email: "piuy@gmail.com" 
    }, { 
        name: 'Eduard', 
        email: "nghtyy@gmail.com" 
    } 
]; 
 
let userProf = '<ul>'; 
for (let i = 0; i < DATA.length; i++) { 
  userProf += "<li class='list'>" + "<h2>" + DATA[i].name + "</h2>" + 
    "<p>" + DATA[i].email + "</p>" + "</li>"; 
} 
document.getElementById("result").innerHTML = userProf; 
 
document.getElementById('search').onkeyup = function() { 
  document.getElementById('result').innerHTML = ''; 
  let searchText = this.value.toLowerCase(); 
  let stringLength = searchText.length; 
  if (stringLength > 1) { 
    for (let i = 0; i < DATA.length; i++) { 
      let userName = DATA[i].name.split('').slice(0, stringLength).join('').toLowerCase(); 
      let userEmail = DATA[i].email.split('').slice(0, stringLength).join('').toLowerCase(); 
      if (userName == searchText || userEmail == searchText) { 
        document.getElementById('result').innerHTML += "<li class='list'>" + "<h2>" + DATA[i].name + "</h2>" + 
          "<p>" + DATA[i].email + "</p>" + "</li>"; 
      } 
    } 
  } else { 
    document.getElementById("result").innerHTML = userProf; 
  } 
};

#result{ 
    width:175px; 
} 
input { 
    margin-bottom: 20px; 
} 
ul { 
    padding: 0; 
    margin: 0; 
} 
.list { 
    padding: 10px; 
    margin-bottom: 20px; 
    background: #cdcdcd; 
    box-shadow:0 0 6px 0 rgba(0,0,0,0.5); 
    border-radius: 6px; 
} 
.list:hover{ 
    background:#f5f5f5; 
    cursor:pointer; 
}

<input type='text' id='search' placeholder="friendly list" autocomplete='off'> 
<div id='result'></div>

Создание интернет-магазина строительных материалов в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

не корректно отрисовывается select с динамически обновляемыми option

Есть выпадающий список:

181

javascript

TypeError: but.getAttribute is not a function - react component

Решил сделать по типу https://githubcom/learn-co-students/React-Pizza-atlanta-web-042219, ограничился 1 категорией и когда решил присваивать значение абзацу из input, следуя...

167

javascript

Как сделать выпадающий список с городами и регионами через API

В интернет магазине нужно сделать выбор города, где живет продавец

230

javascript

JavaScript массивы

Помогите реолизовать функцию getDivisors, которая параметром будет принимать число и возвращать массив его делителей, то есть чисел, на которое...