Как сделать живой поиск с помощью javascript

Как сделать живой поиск с помощью javascript

Если у вас есть страница, которая содержит много информации, лучше всего позволить пользователям искать то, что они, возможно, ищут.

Я не говорю о поиске в базах данных или даже о поиске данных JSON, я говорю о поиске буквального текста на одной визуализированной веб-странице.

Допустим, у нас есть список данных, как показано ниже:

<ul class=”list”>
 <li class=”data-list”>How to learn HTML & CSS</li>
 <li class=”data-list”>How to learn JavaScript</li>
 <li class=”data-list”>How to became Freelancer</li>
 <li class=”data-list”>How to became Web Designer</li>
 <li class=”data-list”>How to start Gaming Channel</li>
 <li class=”data-list”>How to start YouTube Channel</li>
</ul>

Представьте, что на этой странице есть много списков данных.

Давайте добавим поисковый ввод с событием, которое происходит при взаимодействии с ним:

<input type=”search” placeholder=”search…“ id=”src” onkeyup=”searching()”>

И вот JavaScript, который делает все!

function searching(){
 let input = document.getElementById("src").value
 input=input.toLowerCase();
 let v = document.getElementsByClassName("data-list");
 for (w = 0; w < v.length; w++) {
  if (!v[w].innerHTML.toLowerCase().includes(input)) {
   v[w].style.display="none";
  }else{
   v[w].style.display="block";
  }
 }
}

Вы, вероятно, могли бы просмотреть строку за строкой и выяснить, что он делает.

Когда срабатывает событие lookup, выполняется поиск по всем данным списка, определяя, есть ли текст в карточке или нет.

Если текст в списке не соответствует поисковому запросу, то добавляется атрибут display="none", в противном случае, если соответствует, добавляется атрибут display="block".

Чтобы убедиться, что наш JavaScript не работает слишком долго (что означает, что он будет замедлять работу страницы), вы можете добавить setInterval, не стесняйтесь редактировать его самостоятельно.