Build an Autocomplete / Typeahead search | Interview Question

Q: Build an Autocomplete / Typeahead search

**Target Audience:** Frontend developers preparing for a machine coding round. Assumes basic React state and effects; keyboard navigation, caching and ARIA roles are explained from zero. **Difficulty:** Medium > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. The Verified output was produced by running the solution on React 19.3.1 in jsdom with a scripted driver; the country API is simulated in the file with a 150 ms delay. ## 1. Why This Even Matters — A Story First At a busy coffee shop, a good barista starts reaching for your usual cup as soon as you say "the usual fl...". They guess from the first few letters, show you the guess, and you nod or correct them. If you ordered the same thing ten minutes ago, they do not even need to think. An autocomplete is that barista. It turns a few typed letters into a short list of likely answers, lets you

The problem

Question presented to candidate: "Build a country field that suggests matches as the user types. Suggestions come from an API. The user should be able to pick one with the arrow keys and Enter, or with the mouse. Do not call the API for a query we already asked about."

Requirements:

Fetch suggestions (at most 6, prefix matches first) about 250 ms after the user stops typing.
Show a dropdown with Loading / No matches / suggestion states.
Keyboard: Down / Up move the highlight and wrap around, Enter picks the highlighted suggestion, Escape closes.
Mouse: hovering highlights, clicking picks, and the input keeps focus.
Cache results per query so going back to an earlier query (for example with Backspace) does not hit the API again; ignore a response if a newer lookup has started.
Show the picked value and a small counter of requests sent and cache hits. The API is simulated.

What a strong answer should cover:

State model: input text, open flag, suggestions, active index, picked value; the active index reset whenever suggestions change.
Debounce reused from a small hook / composable, and a lookup that only runs when the dropdown is open and the debounced value has caught up.
A Map cache keyed by the normalised query, and a "latest request id" check so an older response cannot replace newer suggestions.
Keyboard handling on the input with wrap-around, mousedown preventDefault so clicking an option does not blur the input, and closing on blur.
Basic combobox ARIA: role="combobox", aria-expanded, aria-controls, aria-activedescendant, role="listbox" / role="option".

Clarifying questions expected:

"Is the list small enough to filter on the client, or must every query go to the server?"
"Should picking a suggestion only fill the input, or also navigate somewhere?"
"How long may cached results be reused?"

Code / implementation expected: Yes. A working autocomplete with debounced fetching, a cache and full keyboard and mouse selection.

React
Async
Debounce

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend developers preparing for a machine coding round. Assumes basic React state and effects; keyboard navigation, caching and ARIA roles are explained from zero. Difficulty: Medium

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. The Verified output was produced by running the solution on React 19.3.1 in jsdom with a scripted driver; the country API is simulated in the file with a 150 ms delay.

1. Why This Even Matters — A Story First

At a busy coffee shop, a good barista starts reaching for your usual cup as soon as you say "the usual fl...". They guess from the first few letters, show you the guess, and you nod or correct them. If you ordered the same thing ten minutes ago, they do not even need to think.

An autocomplete is th

The solution is hidden so you can try first

10 min read · 9 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import Autocomplete from "./src/components/Autocomplete";

export default function App() {
  return (
    <main className="page">
      <h1>Country finder</h1>
      <Autocomplete />
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.