Pattern
Copy-ready search filter ui examples with five practical snippets, clear explanations, common mistakes and related JavaScript examples.
This page focuses on small examples that are easy to paste into a test file, understand, and adjust.
5 practical examples
Filter cards by search text
Hide cards that do not match the input.
const input = document.querySelector('[data-search]');
const cards = [...document.querySelectorAll('[data-card]')];
input.addEventListener('input', () => {
const q = input.value.toLowerCase();
cards.forEach(card => {
card.hidden = !card.textContent.toLowerCase().includes(q);
});
});Use this as a starting point, then rename classes, variables and labels to match your project.
Filter by category button
Use data attributes to show one category.
document.querySelectorAll('[data-filter]').forEach(button => {
button.addEventListener('click', () => {
const group = button.dataset.filter;
document.querySelectorAll('[data-card]').forEach(card => {
card.hidden = group !== 'all' && card.dataset.group !== group;
});
});
});Use this as a starting point, then rename classes, variables and labels to match your project.
Combine search and category
Apply both checks before showing a card.
function applyFilters() {
const q = search.value.toLowerCase();
cards.forEach(card => {
const textMatch = card.textContent.toLowerCase().includes(q);
const groupMatch = activeGroup === 'all' || card.dataset.group === activeGroup;
card.hidden = !(textMatch && groupMatch);
});
}Use this as a starting point, then rename classes, variables and labels to match your project.
Clear filters button
Reset search and show every result.
clearButton.addEventListener('click', () => {
search.value = '';
activeGroup = 'all';
applyFilters();
});Use this as a starting point, then rename classes, variables and labels to match your project.
Show empty message
Display a message when nothing matches.
const visible = cards.filter(card => !card.hidden).length;
emptyMessage.hidden = visible !== 0;Use this as a starting point, then rename classes, variables and labels to match your project.
Common mistakes to avoid
- Copying a snippet without changing class names, selectors, or labels for your page.
- Testing only on a desktop screen and missing mobile behavior.
- Forgetting accessibility details such as labels, focus states, and meaningful text.
FAQ
Can I copy these examples?
Yes. They are written as practical starting points you can copy, study and adapt.
Are these examples beginner-friendly?
Yes. Each page keeps the examples small and explains when the pattern is useful.