Autocomplete is one of the most common frontend interview questions out there. I’ve been asked some version of it more than once, and it’s on almost every list of app-design questions.
It’s a great question because it looks easy. An input, a fetch, a dropdown. But it quietly tests debouncing, race conditions, caching, keyboard handling, and accessibility.
Now swap the backend for an AI model that suggests completions. Every weakness gets amplified. Requests are slower, more expensive, and less predictable. Here’s how I’d build it, step by step, the way I’d walk through it in an interview.
Requirements I’d clarify first
- Do suggestions come from a search index, an AI model, or both? (I’ll assume both: fast search results plus AI suggestions.)
- Minimum characters before we fetch? (I’ll say 2.)
- Show suggestions in a dropdown, inline “ghost text”, or both?
- Keyboard support: arrow keys, Enter to select, Escape to close, Tab to accept ghost text.
- Any limits on cost? AI suggestions on every keystroke can get expensive fast.
Bug #1: Too many requests
A naive implementation fetches on every keystroke. Typing “react hooks” fires 11 requests. With an AI backend,... premium content.
