Design autocomplete search (frontend) | Frontend System Design

Problem

Design the frontend for a search autocomplete box (e.g. Google Search, Amazon product search) handling 100M+ queries/day at scale from the client perspective.

Discussion areas

• Requirements: sub-100ms perceived latency, keyboard navigation, recent searches, trending queries, spell correction hints, mobile + desktop.
• Debounce & cancel: 150–300ms debounce; abort prior in-flight request via AbortController on new keystroke.
• Caching: LRU cache keyed by normalized query prefix; serve instant results for revisited prefixes.
• Ranking UI: blend API order with client boosts (recent, local); highlight matched substring.
• Accessibility: combobox ARIA pattern, announce result count, Arrow/Enter/Escape behavior.
• Resilience: stale cache fallback on network error; empty/loading/error states; rate-limit UX.
• Performance: don't re-render full list — virtualize when >20 results; web worker for fuzzy match (optional).
• Security: escape HTML in suggestions; never dangerouslySetInnerHTML user queries.