Search Box — Free HTML CSS JS Live Filter Snippet

A polished search box is more than a styled text input. It communicates interactivity, responds to focus with a visual ring, filters results instantly as the user types (for suggestions, see the autocomplete input), and ideally shows a keyboard shortcut hint — as in the command palette and keyboard shortcuts panel — for power users. This snippet covers all four in a minimal, clean design.

The :focus-within ring

The search input is visually separated from the container — the <input> has no border, and the .search-wrap div holds the border and focus ring. When any child element (the input) is focused, :focus-within applies to the parent container. This lets you style the outer wrapper on input focus: border-color: #6366f1 and box-shadow: 0 0 0 3px rgba(99,102,241,0.12). This approach is cleaner than styling the input directly because it keeps the icon and input visually unified within a single bordered container.

The keyboard shortcut badge

The <kbd> element in the search box shows a keyboard shortcut hint — typically Cmd+K or Ctrl+K — styled as a small pill with a light background and border. Showing the keyboard shortcut directly in the UI teaches power users the faster path. In production, wire a keydown listener for the shortcut that calls input.focus().

The live filter logic

The filterList(q) function uses querySelectorAll('#list li') to get all list items and classList.toggle('hidden', condition) to show or hide each. The condition is !li.textContent.toLowerCase().includes(q.toLowerCase()) — a case-insensitive substring match. classList.toggle(className, force) adds the class if force is true and removes it if false — a single call that both adds and removes without separate if/else branches.

Connecting to real data

The current list items are static HTML. To filter a real data array, render the list items from JavaScript: items.forEach(item => { const li = document.createElement('li'); li.textContent = item; list.appendChild(li); }). The filterList function then works unchanged on the generated items.

Adding debounce for API search

For a search that calls an API on each keystroke, add a debounce: clear a timeout on each input event and set a new one that fires after 300ms. This prevents an API call on every keystroke and instead fires only when the user pauses.

The :focus-within ring

The search container (not the input) has the focus ring: .search-box:focus-within { box-shadow: 0 0 0 3px rgba(accent, 0.2); border-color: accent; }. :focus-within applies when any descendant has focus. This means the border and ring apply to the container when the input inside is focused — creating a larger, more visually prominent focus indicator than the default browser outline on the input alone.

The live filter pattern

The search input's oninput handler calls filterItems(e.target.value). filterItems iterates all .item elements and toggles .hidden based on whether the item's text content includes the query string (case-insensitive). The filter runs on every keystroke without debounce for lists under 500 items. For larger lists, add a 150ms debounce: clearTimeout(timer); timer = setTimeout(() => filterItems(q), 150).

The clear button

The × clear button appears when the input has content and disappears when it is empty. Clicking it clears the input, triggers a filterItems('') to show all items, and returns focus to the input. Implement the visibility toggle with a CSS class: .search-box.has-value .clear-btn { display: flex; } and add/remove .has-value on every input event based on input.value.length.