Build Autocomplete / Typeahead with Debounce & Highlight

Question

Accepted Answer

**Requirements** - Input fetches suggestions from async source debounced 300ms; cancel stale requests (ignore out-of-order responses via sequence id / AbortController). - Dropdown shows matches with highlighted query substring; keyboard ↑/↓/Enter/Esc, mouse hover, and `aria-activedescendant`. - Cache results in `Map`; handle empty, loading, error states; close on outside click. **Architecture** - `useDebouncedValue(query, 300)` + `requestId` ref incremented per fetch; only apply if `id === latest`. - Highlight: `text.split(new RegExp(`(${escape(query)})`,"i")).map(part => part.toLowerCase()===query.toLowerCase() ? {part} : part)`. - Outside click: `mousedown` listener on document checking `!container.contains(target)`. **What interviewers look for:** debounce + abort, race handling, caching, highlight, ARIA combobox pattern, outside-click. **Reference implementation** ```jsx function useDebounce(v, ms=300) { const [d,setD]=React.useState(v); React.useEff

Build Autocomplete / Typeahead with Debounce & Highlight

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THE
STREAK ALIVE.

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THESTREAK ALIVE.

KEEP THE
STREAK ALIVE.