HTML JS

HOW TO FILTER/SEARCH HTML LIST IN JAVASCRIPT

SEARCH BOX <input type="text" id="filter"/>

THE LIST <ul id="list">    <li>Apple</li>  <li>Banana</li>    <li>Coconut</li>  <li>Durian</li> </ul>

THE CSS .hide{ display: none; }

HTML AND CSS

01

GET HTML ELEMENTS var filter = document.getElementById ("filter"); var all = document.querySelectorAll ("#list li");

JAVASCRIPT FILTER (A)

02

FILTER AS USER TYPES filter.addEventListener("keyup", () => {   SEARCH VALUE   let search = this.value.toLowerCase();     SHOW MATCHES, HIDE MISSES   for (let i of all) {     let item = i.innerHTML.toLowerCase();     if (item.indexOf(search) == -1)     { i.classList.add("hide"); }     else { i.classList.remove("hide");  }   } });

JAVASCRIPT FILTER (B)

03