Filterable List Template

An interactive list that users can instantly filter by typing into a search field.

This component is perfect for directories, product lists, or any long list that benefits from a simple, real-time search function to help users find what they need quickly.

A screenshot of a list with a search bar above it, filtering the results.

Get Source Code Preview

About this Template

This component uses vanilla JavaScript to add a useful live search feature to a standard list. It listens for the input event on the search field and, on every keystroke, loops through the list items to show or hide them based on the user's query. The search is case-insensitive for a better user experience and includes a "no results" message for when a search returns empty.

Features

Real-time Filtering: Updates the list instantly as the user types, with no need to press enter.
Pure JavaScript: The functionality is lightweight and uses no external libraries like jQuery.
Case-Insensitive Search: The search logic converts both the query and the list text to lowercase for a forgiving search experience.
"No Results" Feedback: A message appears to inform the user when their search doesn't match any items.
Accessible: Uses a proper label for the search input and ARIA attributes to connect the input to the list it controls.
Self-Contained Code: All functionality and styles are scoped to a single parent class.

Code Breakdown

The HTML consists of a search input and an unordered list (ul) that has an id. The search input has an aria-controls attribute that points to the list's id, programmatically linking them.

The JavaScript first selects the necessary elements: the input field, all list items, and the "no results" message element. An event listener is attached to the input to fire on the input event.

Inside the event handler, the script gets the search term and converts it to lowercase. It then iterates through each list item. For each item, it gets the item's text, converts it to lowercase, and checks if it includes the search term. Based on the result, it toggles the item's hidden attribute. After checking all items, it updates the visibility of the "no results" message based on whether any items are currently visible.

Code

Here's the full code for the template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Filterable List</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f1f5f9;
            color: #334155;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
        }

/* ==========================================================================
           Filterable List Component Styles - Copy from here
           ========================================================================== */
        .filterable-list-template {
            --filter-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --filter-primary-text-color: #1e293b;
            --filter-secondary-text-color: #64748b;
            --filter-accent-color: #3b82f6;
            --filter-bg-color: #ffffff;
            --filter-border-color: #cbd5e1;

font-family: var(--filter-font-family);
            color: var(--filter-primary-text-color);
            width: 100%;
            max-width: 600px;
            background-color: var(--filter-bg-color);
            border: 1px solid var(--filter-border-color);
            border-radius: .5rem;
            padding: 2rem;
        }

.filterable-list-template *,
        .filterable-list-template *::before,
        .filterable-list-template *::after {
            box-sizing: border-box;
        }
        
        .filterable-list-template .list-header {
            text-align: center;
            margin-bottom: 2rem;
        }

.filterable-list-template .list-header h2 {
            font-size: 1.75rem;
            margin: 0;
        }
        
        /* Visually hide the label, but keep it accessible */
        .filterable-list-template .search-label {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0;
        }

.search-input {
            width: 100%;
            padding: .75rem 1rem;
            font-size: 1rem;
            border: 1px solid var(--filter-border-color);
            border-radius: .25rem;
            margin-bottom: 2rem;
        }
        
        .search-input:focus {
            outline: 2px solid var(--filter-accent-color);
            outline-offset: 1px;
        }
        
        .item-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .item-list li {
            padding: .75rem 0;
            border-bottom: 1px solid var(--filter-border-color);
        }

.item-list li:last-child {
            border-bottom: none;
        }

.no-results {
            text-align: center;
            color: var(--filter-secondary-text-color);
            font-style: italic;
        }
    </style>
</head>
<body>

<div class="filterable-list-template">
    <header class="list-header">
        <h2>Conspiracy Clearinghouse</h2>
    </header>

<div class="search-bar">
        <label for="search-input" class="search-label">Search Theories:</label>
        <input type="search" id="search-input" class="search-input" placeholder="Search theories..." aria-controls="theory-list">
    </div>

<ul id="theory-list" class="item-list">
        <li>Birds are not real; they are government drones.</li>
        <li>The moon landing was faked on a soundstage.</li>
        <li>Finland doesn't actually exist.</li>
        <li>Shakespeare's plays were written by someone else.</li>
        <li>Denver International Airport is a secret bunker.</li>
        <li>Lizard people secretly run the world.</li>
        <li>The Earth is actually hollow.</li>
        <li>The Titanic was deliberately sunk for insurance money.</li>
        <li>Bigfoot is just a blurry, out-of-focus bear.</li>
    </ul>
    
    <p class="no-results" hidden>No matching theories found. Keep searching!</p>

noResultsMessage.hidden = visibleItemsCount > 0;
            });
        });
    </script>
</div>

</body>
</html>

View Output