Design an Autocomplete Component (Front End)
Design a reusable autocomplete component: the search box that suggests results as you type, as on a large site's global search. Several product teams will use it, with different result types (plain text, rich rows with images, grouped sections), so it must be configurable. Focus on the client: its architecture, its API, how it talks to the server, and how it behaves on slow networks, on phones and with assistive technology.
Cover the requirements and scope, the component's architecture, its props and the server API, the data layer (debouncing, cancellation, caching, race conditions), rendering performance, and accessibility and internationalization.
To build the component itself, see Typeahead with Keyboard Navigation.
Hints
Hint 1
Split the component into an input, a results list, and a controller that owns debouncing, request cancellation and the cache. The UI pieces stay dumb, and the controller is what teams configure.
Hint 2
A cache keyed by query, with a size cap and a time-to-live, makes backspacing instant. Decide whether a prefix's results can answer a longer query locally.
Hint 3
The accessible pattern is a combobox: an input with role="combobox", aria-expanded and aria-activedescendant, pointing at a listbox of options. Focus never leaves the input.
Asked at
Sign in to talk to the interviewer — ask what's in scope, what scale to design for, or for a nudge when you're stuck. Conversations save to your account.