A simple way to filter list with data attributes

#css #javascript

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/faker.js"></script>
<input type="text" id="filter" class="input" placeholder="filter" value="">

const ul = document.createElement('ul');

ul.style.display = 'none';
ul.classList.add('content');

const listItems = Array.from({ length:  1000 }, () => {
  const name = faker.name.findName();
  const li = document.createElement('li');
  li.textContent = name;
  li.dataset.name = name;
  ul.appendChild(li)
  return li;
});

document.body.appendChild(ul);

window.filter.addEventListener('input', (event) => {
  const inputValue = event.target.value.toLowerCase().trim();
  ul.style.display = inputValue ? "block" : "none"; 
  listItems.forEach(item => {
    const attribute = item.dataset.name.toLowerCase();
    item.style.display = attribute.includes(inputValue) ? 'block' : 'none';
  });
});