Deviopath › React

Autocomplete with Keyboard

Hard · Forms

Build an autocomplete for the COUNTRIES array.

Render an <input placeholder="Country">. While the trimmed input is not empty and there are matches, show <ul className="suggestions"> with one <li> per country that STARTS WITH the text (case-insensitive), in the original order.

Keyboard on the input (onKeyDown):

- "ArrowDown" highlights the next suggestion; from the last one (or when nothing is highlighted) it goes to the first.

- "ArrowUp" highlights the previous suggestion; from the first one (or when nothing is highlighted) it goes to the last.

- "Enter" picks the highlighted suggestion. With nothing highlighted it does nothing.

The highlighted <li> has the class "active". Typing resets the highlight. Clicking an <li> also picks it.

Picking a country puts its name in the input, hides the list and shows <p className="selected">Selected: Austria</p>.

Next: Product Browser