Design an autocomplete search box for the web
PremiumFrontend systemEasy
- Debouncing
- AbortController
- LRU cache
Quick answer
This frontend system interview question asks you to design an autocomplete search box for the web. Aim for a design that loads fast, stays responsive and is easy to maintain, then explain components, state, data fetching and trade-offs. Interviewers want to see how you structure the interface, manage state and keep the experience fast.
The problem
Design an autocomplete search box for the web: the browser-side input that shows suggestions from an existing API while the user types, like the search bar on most shopping and video sites. The hard part is sending few requests, never showing stale results and staying fast and accessible.
The component is a reusable UI widget that product teams drop into any page. It calls an existing suggestion API, shows up to 10 suggestions, highlights the typed part and lets the user pick one with the mouse, touch or keyboard.
What must an autocomplete search box for the web do?
- Live suggestions: Show up to 10 suggestions for the current text after the user pauses typing, with the typed prefix highlighted.
- Pick a suggestion: Mouse click, tap, or Arrow keys plus Enter fill the box and call an onSelect callback; Escape closes the list.
How well must it do it?
- Fewer requests: Typing a word sends one request per pause, not one per key, and repeated queries are served from cache.
- Correct results: The list always matches the text in the box; a slow old response never replaces a newer one.
What scale should you design for?
Use these numbers in your estimates.
The scale numbers unlock with this questionUnlock
Key concepts
- Debouncing
- AbortController
- LRU cache
- ARIA combobox
- Race conditions
- Keyboard navigation
How you’ll practise
- Requirements
- Components
- State and data
- Network and caching
- Performance and accessibility
- Wrap-up
Lala, personalized to you, gives a hint when you ask and reviews your design when you are ready.
What do interviewers look for?
In any frontend system design round.
- Starts from the user flows and the screens
- Splits the interface into clear components
- Decides where state lives and how it stays in sync
- Plans data fetching, caching and loading states
- Covers performance, accessibility and error states
- Explains how the design holds up on slow networks and small screens
Questions people ask about this interview question
- Which design type is this question?
- It is a frontend system question. You design an autocomplete search box for the web and explain your choices the way you would in an interview.
- Is this question asked at entry level?
- It is marked Easy, so it suits engineers who are new to frontend system interviews. It is also a good warm-up before harder questions.
- What should I cover first?
- Start with the main user flows, the screens and the data each one needs. Agree on scope with the interviewer before you design anything.
- Can I practise it for free?
- It is a premium question. Sign up and unlock it once for 10 credits; it then stays unlocked. When you finish, Lala, your personalized AI mentor, can review your design for 30 credits.
Related questions
Updated · Written by the SevyDevy team