Build Autocomplete / Typeahead with Debounce & Highlight

Q: Build Autocomplete / Typeahead with Debounce & Highlight

**Target Audience:** Frontend developers who can already build a basic autocomplete and want the two details that separate a demo from production: safe highlighting and race-proof requests. **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; regex and string facts were run on Node 22.22. The package API is simulated in the file with deliberately uneven delays. ## 1. Why This Even Matters — A Story First You ask three friends, one after another, "what is the capital of Aus...", "of Austr...", "of Australia?". The friend you asked last answers first ("Canberra"), then the first friend finally shouts "Vienna!" because they heard "Aus" and thought Austria. If you write down whatever you heard last, your notes say Vienna. Asking later does not mean h

The problem

Question presented to candidate: "You already have a basic typeahead. Now make it production-safe: highlight the part of each suggestion that matches what the user typed, without ever injecting HTML, and make sure a slow, older response can never replace the results for what is in the box right now. Show me the race happening and show me your fix."

Requirements:

Debounce input by 300 ms and fetch suggestions from a simulated API whose latency depends on the query, so older requests can resolve last.
Highlight every case-insensitive occurrence of the query inside each suggestion with mark elements, treating the query as literal text: c++, ( and . must not break or change matching.
Render suggestions as text: an item containing markup such as <img src=x onerror=...> must be displayed, never parsed.
Guard against out-of-order responses with AbortController plus a request-id check; include a toggle that turns the guard off so the bug can be demonstrated.
Keyboard Up / Down / Enter / Escape and aria-activedescendant, as in the basic version.

What a strong answer should cover:

Why debounce alone does not order responses, with a concrete timeline (r slow, re slower than rea).
Two layers of protection: abort the previous request, and still ignore any response whose id is not the latest (for APIs that ignore abort).
Highlighting by splitting on an escaped regex with one capture group, then rendering parts as text nodes; no innerHTML, v-html, [innerHTML] or dangerouslySetInnerHTML.
Why lowercasing and slicing by indexOf can misalign (İ lowercases to two characters).
Showing which query the visible results belong to, and testing the race deterministically.

Clarifying questions expected:

"Can the API be cancelled, or must I ignore stale responses client-side?"
"Should highlighting match whole words, prefixes, or any substring? Should it ignore accents?"
"Can suggestion text contain user-generated content?"

Code / implementation expected: Yes. A working typeahead with safe highlighting and a demonstrable race guard.

React
Autocomplete
Typeahead
Debounce
Accessibility

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 who can already build a basic autocomplete and want the two details that separate a demo from production: safe highlighting and race-proof requests. 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; regex and string facts were run on Node 22.22. The package API is simulated in the file with deliberately uneven delays.

1. Why This Even Matters — A Story First

You ask three friends, one after another, "what is the capital of Aus...", "of Austr...", "of Australia?". The friend you asked last answers first ("Canberra"), then the first friend finally shouts "Vienna!" because they heard "Aus" and thought Austria. If you

The solution is hidden so you can try first

9 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 Typeahead from "./src/components/Typeahead";

export default function App() {
  return (
    <main className="page">
      <h1>Package search</h1>
      <Typeahead />
    </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.