Live Interactive Demo Model
Autocomplete & Typeahead Search
A search input that suggests matching items, highlights query matches, and navigates with Arrow keys.
Recent:
Acceptance Criteria
Writing debounced input listeners to optimize search query executions
Highlighting matched characters using RegExp splitting
Controlling active index with ArrowUp, ArrowDown, and Enter handlers
Target APIs & Concepts
Debounced SearchSubstring Match HighlightingArrow Key Navigation
Ready to code this yourself? Switch to the Candidate Code Studio to write your implementation in React 19 and run automated test evaluations!