Sign in
Skip to solution
mediumMachine Coding

Build an Autocomplete / Typeahead search

744 views
01

Understand the problem

Build a search input that suggests results from an async source.

ReactAsyncDebounce
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Solve in

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.

Solution ready — 2 min read

Classified // press E to declassify

04

React solution

Complete solutionRun Playground
import React from 'react';
import Autocomplete from './src/Autocomplete';

const COUNTRIES = [
  'Argentina', 'Australia', 'Austria', 'Belgium', 'Brazil', 'Canada', 'Chile',
  'China', 'Denmark', 'Egypt', 'Finland', 'France', 'Germany', 'Greece', 'India',
  'Indonesia', 'Ireland', 'Italy', 'Japan', 'Kenya', 'Mexico', 'Nepal',
  'Netherlands', 'Norway', 'Poland', 'Portugal', 'Spain', 'Sweden', 'Thailand',
  'Turkey', 'Ukraine', 'United Kingdom', 'United States', 'Vietnam',
];

export default function App() {
  return (
    <div style={{ fontFamily: 'sans-serif', padding: 20 }}>
      <h1>Autocomplete Demo</h1>
      <Autocomplete items={COUNTRIES} placeholder="Search countries…" />
    </div>
  );
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 35 of 87 decoded in the Frontend Machine Coding track. One more won't hurt.

Back to track