Skip to content

Design an autocomplete search box (frontend)

Design an autocomplete search box: as someone types it suggests results, and other teams can drop it into their pages.

System designFrontend and full stackMid-levelSenior

What to work through

Work through an autocomplete search box as a spoken system design interview. Start by clarifying the scope, sketch a working design and explain the trade-offs behind your choices.

  • Suggest results as someone types, with no submit button
  • Pick a suggestion with the mouse or the keyboard
  • Show loading, no results and error states
  • Let each team change how a result looks

Constraints to discuss

  • Each keystroke answers within 200 milliseconds
  • Usable with only a keyboard, and with a screen reader
  • No request for an empty query or one under 2 characters
  • Works on phones and desktop browsers
Need a starting point?

Watch for these common gaps as you prepare:

  • A request on every keystroke with no pause
  • No cancellation, so an older answer replaces a newer one
  • Sending a request for an empty query
  • Mouse only, with no keyboard support
  • An active option left pointing past the end when the results change
Read: The system design interview: what the interviewer writes down, minute by minute

Why this question is in the collection

These sources connect the problem to company interview reports or preparation guides. They do not guarantee what a company will ask you.

Your next question

Storage, files and linksDesign BitlyInfrastructure and platformDesign a rate limiterInfrastructure and platformDesign an A/B testing platformInfrastructure and platformDesign an ad click aggregator
Browse the collection
01

Pick a question

Read the brief and choose what you want to work on.

02

Talk it through

Explain your thinking. Respond to follow-ups. Draw when a design needs it.

03

Find your next improvement

Use the feedback from your interview to decide what to practice next.