JSFiddle - React, Tailwind, and code Playground

by jacobwsmith

HTML

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

CSS

#container {
  position: relative;
  width: fit-content;
}

#search {
  padding-right: 25px; /* space for the X */
  border: solid 1px blue;
  border-radius: 5px;
}

#container::after {
  content: "✕"; /* the X symbol */
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  font-size: 14px;
  cursor: pointer;
}

JavaScript

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

search.addEventListener('keyup', (evt) => {
  const searchStr = evt.target.value.toLocaleLowerCase();
  listItems.forEach(item => {
    const itemStr = item.textContent.toLowerCase()
    if(itemStr.includes(searchStr)){
      item.classList.remove('hidden');
    } else {
      item.classList.add('hidden');
    }
  });
})