Art of Codeartofcode
Lesson 4 of 15

34. Design Search Autocomplete (Typeahead)

1
The interview prompt
2
34.1 What do you ask first?
3
34.2 How big is this, really?
4
34.3 What are the doors?
5
34.4 What do we store?
6
34.5 What does the whole system look like?
7
34.6 Trie or prefix index?
8
34.7 How do you compute top-K per prefix?
9
34.8 How do suggestions follow trends?
10
34.9 How do you cache suggestions?
11
34.10 What would you say in the last five minutes?
12
Score yourself
13
Variations to practise
14
Sources
15
Code lab
34. Design Search Autocomplete (Typeahead)

34.3 What are the doors?

3 min read+10 XP

Step 3: API and data model (10 minutes)

GET /v1/suggest?q=dat&limit=5 returns: 200 { "prefix": "dat", "suggestions": ["data science", "database internals", "data structures", "dating advice", "data analytics"] } headers: Cache-Control: public, max-age=300 (same answer for everyone)
  • GET with the prefix in the URL, so responses are cacheable by the browser and the CDN (Chapter 26).
  • Lowercase and trim the prefix on the client and server, so "Dat", "dat " and "dat" share one cache key.
  • The client debounces (waits ~100 ms after the last keystroke), cancels in-flight requests when a new one starts, and keeps a small local cache so backspacing doesn't call the server again.