Place Search Autocomplete

In a maps app, the search box is the front door: people type two or three letters and expect the place they mean to be one keystroke away. It also has to be gentle with the backend, because a request per keystroke from millions of phones is a denial of service the product inflicts on itself.

Build the place search box.

Requirements

• An input labelled Search places, with the role combobox.
• When the user stops typing for 300 ms, search with GET /api/places?q=<text> (the trimmed text, URL-encoded). It answers { "places": [{ "id", "name", "address" }] }. Typing coffee in one go sends one request.
• With fewer than two characters, nothing is searched and no suggestions are shown.
• While a search is in flight, show Searching....
• Show the results as a listbox of options, each with the place's name followed by its address. With no results, show No places found. If the search fails, show an alert: Search is unavailable. Try again.
• Keyboard: ArrowDown and ArrowUp move the highlighted option (stopping at the first and last), Enter picks the highlighted one and Escape closes the list. The highlighted option has aria-selected="true", and the input's aria-activedescendant is that option's id. The input's aria-expanded says whether the list is shown.
• Clicking an option also picks it. Picking a place puts its name in the input, closes the list and shows Selected: <name>, <address>, for example Selected: Blue Bottle Coffee, 66 Mint St.
• Only the latest search counts: if an answer to an older query arrives after a newer one, it must not replace the newer results.