HTML JS
(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; }
GET HTML ELEMENTS var filter = document.getElementById ("filter"); var all = document.querySelectorAll ("#list li");
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"); } } });