Combobox — Searchable Select with Keyboard Nav

A combobox pairs a text input with a filtered dropdown list, letting a user either type to narrow a long list of options or browse it directly — the pattern behind "assign to a teammate," "choose a country," or "pick a project" fields where a plain <select> becomes unusable past a dozen items. Unlike the autocomplete input, which suggests free-text completions, a combobox constrains the final value to one item from a fixed list.

ARIA combobox pattern

The input carries role="combobox", aria-expanded, aria-controls pointing at the listbox's id, and aria-autocomplete="list". The list itself is role="listbox" with each item as role="option". aria-expanded flips between "true" and "false" as the list opens and closes, which is what tells a screen reader whether the popup is currently visible — this is the official WAI-ARIA combobox pattern, not an invented shortcut.

Filtering and highlighting

On every keystroke, filterList() rebuilds the filtered array with a case-insensitive indexOf check against each person's name, and resets activeIndex to 0 so the first match is always ready to select with Enter. The highlight() function wraps the matched substring in <mark>, built with string slicing around the match index rather than a regex replace — sidestepping the classic bug where special regex characters in a user's search query (like . or () would otherwise need escaping before use in a RegExp.

Keyboard navigation

ArrowDown and ArrowUp move activeIndex and re-render, clamped with Math.min/Math.max so it can't run past either end of the filtered list. Enter selects whichever option is currently active — not necessarily the one under the mouse — which is why activeIndex and mouse :hover are tracked as two separate concerns; a combobox driven purely by hover state breaks the moment a keyboard user moves focus without moving the mouse. Escape closes the list without selecting, leaving the typed text as-is.

Selection and the clear button

Selecting an option sets input.value to the person's full name, stores the full object in selected, and reveals a small circular clear button. Typing again after a selection clears selected immediately — this matters because it is what distinguishes "the user is refining their search" from "the user has committed to a choice," and downstream code should treat selected (not input.value) as the source of truth for what was actually picked.

Outside-click and empty state

A document-level click listener uses e.target.closest('#combo') to close the list on any click outside the component, the same delegation pattern used by dropdown menus and split buttons. When no options match the query, the list renders a single .combo-empty row instead of an empty <ul>, so the absence of results is communicated rather than silently showing nothing.

XSS safety

Every piece of user-influenced text — both the option names and the search query echoed inside <mark> — passes through escapeHtml() before being inserted via innerHTML. This is a small but easy detail to skip when a list is rendered from a template string, and skipping it is exactly how a search box becomes a stored or reflected XSS vector once the option list comes from real user data instead of a hardcoded array.

React integration

In React, keep query, filtered, activeIndex, and selected as four pieces of useState, derive filtered with useMemo off query, and keep the same ARIA attributes on the rendered <input> and <ul> — the accessibility structure translates directly regardless of framework.

See also the multi-select dropdown for choosing several options at once, and the country selector for a domain-specific combobox variant.