<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";
}
}
});
