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

Question

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

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

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

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

const DATA = [
{
    name: 'Petro',
    email: "[email protected]"
}, {
    name: 'Ivan',
    email: "[email protected]"
}, {
    name: 'Igor',
    email: "[email protected]"
}, {
    name: 'Anton',
    email: "[email protected]"
}, {
    name: 'Pavlo',
    email: "[email protected]"
}, {
    name: 'Volo',
    email: "[email protected]"
},{
    name: 'Ira',
    email: "[email protected]"
}, {
    name: 'Eduard',
    email: "[email protected]"
}];

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

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

const DATA = [
    {
        name: 'Petro',
        email: "[email protected]"
    }, {
        name: 'Ivan',
        email: "[email protected]"
    }, {
        name: 'Igor',
        email: "[email protected]"
    }, {
        name: 'Anton',
        email: "[email protected]"
    }, {
        name: 'Pavlo',
        email: "[email protected]"
    }, {
        name: 'Volo',
        email: "[email protected]"
    },{
        name: 'Ira',
        email: "[email protected]"
    }, {
        name: 'Eduard',
        email: "[email protected]"
    }
];

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: "[email protected]"
    }, {
        name: 'Ivan',
        email: "[email protected]"
    }, {
        name: 'Igor',
        email: "[email protected]"
    }, {
        name: 'Anton',
        email: "[email protected]"
    }, {
        name: 'Pavlo',
        email: "[email protected]"
    }, {
        name: 'Volo',
        email: "[email protected]"
    },{
        name: 'Ira',
        email: "[email protected]"
    }, {
        name: 'Eduard',
        email: "[email protected]"
    }
];

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>

БЛОГ НА HUSL

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

Ответы (1 шт):