<div class="filter-wrapper">
  <input type="text" id="filterInput" placeholder="Search names...">
  <ul id="namesList" class="list-group">
    <li><div class="avatar">A</div> Alex Johnson</li>
    <li><div class="avatar">B</div> Brian Smith</li>
    <li><div class="avatar">C</div> Catherine Doe</li>
    <li><div class="avatar">D</div> Daniel Lee</li>
    <li><div class="avatar">E</div> Emily White</li>
    <li><div class="avatar">F</div> Frank Wright</li>
    <li><div class="avatar">G</div> Grace Hopper</li>
  </ul>
</div>

.filter-wrapper {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  max-width: 400px;
  margin: 0 auto;
}
#filterInput {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  margin-bottom: 15px;
  font-size: 1rem;
  box-sizing: border-box;
  outline: none;
}
#filterInput:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.list-group {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}
.list-group li {
  padding: 12px 15px;
  border-bottom: 1px solid #f9fafb;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #374151;
}
.list-group li:last-child {
  border-bottom: none;
}
.list-group li:hover {
  background-color: #f3f4f6;
}
.avatar {
  width: 32px;
  height: 32px;
  background: #3b82f6;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
}

const input = document.getElementById("filterInput");
const list = document.getElementById("namesList");
const items = list.getElementsByTagName("li");

input.addEventListener("keyup", function() {
  const filter = input.value.toLowerCase();
  
  for (let i = 0; i < items.length; i++) {
    const text = items[i].textContent || items[i].innerText;
    if (text.toLowerCase().indexOf(filter) > -1) {
      items[i].style.display = "";
    } else {
      items[i].style.display = "none";
    }
  }
});

Back to Snippets

Live List Filter JS

Help users find what they need quickly with this real-time search filter. As the user types in the input box, the list automatically updates to show only the matching items, which improves usability significantly.

486

#javascript

#css

#search

#filter

#list

#sorting

#input

#ui

/HTML *CSS ()JS Output Live Updates

.filter-wrapper {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  max-width: 400px;
  margin: 0 auto;
}
#filterInput {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  margin-bottom: 15px;
  font-size: 1rem;
  box-sizing: border-box;
  outline: none;
}
#filterInput:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.list-group {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}
.list-group li {
  padding: 12px 15px;
  border-bottom: 1px solid #f9fafb;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #374151;
}
.list-group li:last-child {
  border-bottom: none;
}
.list-group li:hover {
  background-color: #f3f4f6;
}
.avatar {
  width: 32px;
  height: 32px;
  background: #3b82f6;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
}