Autocomplete III

Build a production-minded language autocomplete in React. The visual shell and simulated searchAPI are provided; complete the state machine that connects the text field, network results, cache, keyboard controls, highlighting, and accessible combobox markup.

Contract

1. Keep the input controlled and debounce non-empty searches by 300ms. Normalize the search key with value.trim().toLowerCase().
2. Cache results by that normalized key. When the debounce expires, a cache hit must skip searchAPI and show Loaded from cache without the network delay.
3. Prevent an older in-flight response from replacing results for a newer query. Clearing, selecting, or pressing Escape must also invalidate pending work.
4. Use these status messages in every framework: Type to search · ↑↓ navigate · Enter select, Waiting to search…, Searching…, Loaded from cache, <n> results, No results, and Selected <name>.
5. ArrowDown activates the first result from the unselected state, ArrowUp activates the last, and both wrap. Enter selects the active result. Escape closes the popup and clears the active result.
6. A pointer click selects a result. Selection fills the input, closes the popup, clears results, and announces Selected <name> without starting another search.
7. Highlight every case-insensitive occurrence of the normalized query with .hl. Render ordinary text and <span> nodes—do not use dangerouslySetInnerHTML.
8. Implement the ARIA combobox pattern: the input exposes role="combobox", aria-autocomplete="list", aria-expanded, aria-controls, and aria-activedescendant; the popup uses role="listbox"; each result has a stable id, role="option", and aria-selected.
9. Preserve the supplied layout and CSS classes so the starter and solution have the same visual frame.

React guidance

Use useState for rendered state, a useRef(Map) for the cache, a timer ref for debounce cleanup, and a monotonically increasing request ref to reject stale promises. A useEffect keyed by query is a natural owner for the async pipeline.

Example

Type scr quickly. The UI announces Waiting to search…, calls the API once after 300ms, then shows JavaScript and TypeScript with Scr highlighted. Clear and enter SCR again: after the same debounce, the normalized cache key matches, the network is skipped, and the status reads Loaded from cache.