Auto-complete
Problem statement
An Autocomplete (typeahead) component is one of the most common senior-level machine coding questions because it combines so many real-world concerns into one component: controlled inputs, debouncing, async data fetching, race conditions, keyboard navigation, and accessibility. You'll find this pattern in every major product — Google Search, GitHub's command palette, Slack's message composer.
Your task is to build an Autocomplete input that shows a dropdown of suggestions as the user types. The suggestions should be filtered from a dataset (or fetched from an API) after a 300ms debounce. The user should be able to navigate the dropdown with arrow keys, select a suggestion with Enter, and dismiss the dropdown with Escape.
The complexity here is intentional. Interviewers assign this question specifically to see how you handle layered requirements under time pressure — whether you build incrementally or try to write everything at once.
Requirements & constraints
- A text input that shows suggestions as the user types
- Suggestions filtered or fetched after a 300ms debounce (don't search on every keystroke)
- Dropdown list of matching suggestions below the input
- Keyboard navigation: ArrowDown/ArrowUp move through suggestions, Enter selects, Escape closes
- Clicking a suggestion populates the input and closes the dropdown
- Loading state while fetch is in progress, empty state when no results found
- Clicking outside the component closes the dropdown
How to approach Auto-complete
The strategy an interviewer expects you to reach for.
Problem Understanding Autocomplete is deliberately the hardest single-component question in frontend interviews. It's not hard because any individual piece is complex — each part is manageable. It's hard because you have to manage all of them at once, under time pressure, while explaining your reasoning out loud. The candidates who succeed are the ones who build it incrementally and communicate their approach clearly.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.