Debounced, cached and race-free suggestions
Typing r, re quickly makes one request. The slow answer for re arrives after the fast one for rea, so it's ignored for display but kept in the cache, and retyping re costs no request at all.
An autocomplete suggests results while the user types; the design is about sending few requests (debounce), answering repeats from an LRU cache, never showing stale answers (race conditions), a correct ARIA combobox for keyboard and screen readers, and choosing server ranking or client filtering.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make the combobox close and clear on a second Escape: the first Escape closes the list, the second clears the text.
Add an AbortController to the first example's effect so stale requests are cancelled, not just ignored.
Explain it without notes
Walk me through the design of a search autocomplete.
How do you prevent an old response from overwriting a newer one?
How would you implement an LRU cache for suggestions, and why LRU?
Which ARIA attributes does a combobox need, and how does keyboard navigation work?
When would you filter on the client instead of asking the server?
Preview
Console
Nothing logged yet.Expected console output
request: re
request: rea
show rea: React, Read, Ready, Reason
ignored stale answer for re
cache hit: re
requests: 2, cache: rea, re