HTML JS

FILTER/SEARCH HTML LIST IN JAVASCRIPT

(quick guide & example)

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. SHOW MATCHES, HIDE MISSES. filter.addEventListener("keyup", () => {   let search = this.value.toLowerCase();   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