Search Filter by hand

by jacobwsmith

HTML

<style>
.hidden {
    display: none;
}
    </style>
<input id="search" type="text" placeholder="Search..."/>
<ul id="list">
  <li>bing</li>
  <li>bong</li>
  <li>foo</li>
  <li>bar</li>
</ul>

JavaScript

const searchInput = document.getElementById('search');
const list = document.getElementById('list');
const items = list.querySelectorAll('li');

searchInput.addEventListener('keyup', event => {
  items.forEach(item => {
    const ss = searchInput.value;
    const tt = item.textContent;
    if(tt.includes(ss)) {
      // item.style.display='block';
      item.classList.remove('hidden');
      return
    }
    // item.style.display='none';
    item.classList.add('hidden');
  })
})