Build an Autocomplete / Typeahead search

Question

Accepted Answer

## Building an Autocomplete / Typeahead in React

**Mental model:** Autocomplete = a debounced query + a filtered suggestion list + keyboard navigation (Up/Down/Enter/Escape) over that list. Track the input text, the open state, and the active (highlighted) index. The list is *derived* from the query, not stored.

### Step 1 — State: text, open, active index
```jsx
const [text, setText] = useState('');
const [open, setOpen] = useState(false);
const [active, setActive] = useState(-1);
```

### Step 2 — Derive suggestions from the query
Filter (case-insensitive) and cap the count; recompute with `useMemo`.

```jsx
const matches = useMemo(() => {
  const q = text.trim().toLowerCase();
  return q ? items.filter((i) => i.toLowerCase().includes(q)).slice(0, 8) : [];
}, [text, items]);
```

### Step 3 — Keyboard navigation
Arrow keys move `active` (clamped); Enter selects; Escape closes.

```jsx
if (e.key === 'ArrowDown') setActive((a) => Math.min(a + 1, matches.length - 1));
if (e.key === 'A

Build an Autocomplete / Typeahead search

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)