Premium

Autocomplete Search Bar (Hooks)

By FrontendAtlas Team · Updated Jan 30, 2026

Build an autocomplete search bar in React. As the user types, show a dropdown of suggestions filtered from a dataset. Add debounced searching, mouse selection, keyboard navigation (↑/↓/Enter/Escape), and close-on-outside-click. Framework focus: React hooks (useState/useEffect), JSX event handling, and one-way props/state flow.

Render a single as the main UI.
Show an input with a dropdown of suggestions filtered by the current…

What you’ll build / What this tests

This premium react coding focuses on Autocomplete Search Bar (Hooks). You’ll apply react and hooks thinking with medium level constraints. The prompt emphasizes Build an autocomplete search bar in React. As the user types, show a dropdown of suggestions….

Learning goals

Translate the prompt into a clear react API signature and return shape.
Apply react, hooks, state techniques to implement autocomplete search bar (hooks).
Handle medium edge cases without sacrificing readability.
Reason about time/space complexity and trade-offs in react.

Key decisions to discuss

Define the exact input/output contract before coding.
Prioritize predictable edge-case handling over micro-optimizations.

Evaluation rubric

Correctness: covers required behaviors and edge cases.
Clarity: readable structure and predictable control flow.
Complexity: avoids unnecessary work for large inputs.
API discipline: no mutation of inputs; returns expected shape.
Testability: solution is easy to unit test.

Constraints / Requirements

Render a single as the main UI.
Show an input with a dropdown of suggestions filtered by the current query (case-insensitive, substring match).
Debounce input changes (e.g. 250–400ms) before searching.
Support mouse selection (mousedown on an option selects it, closes dropdown, resets active index).
Support keyboard navigation: ArrowDown/ArrowUp moves active option (wrap-around), Enter selects, Escape closes.
Close the dropdown when clicking outside the component.
Basic accessibility: role="combobox", role="listbox", role="option", aria-expanded, aria-activedescendant.
Typing updates suggestions after the debounce delay.
If query is empty/whitespace, dropdown is closed and no suggestions are shown.
ArrowDown from no selection activates the first option; ArrowUp activates the last option.

Mini snippet (usage only)

// Example usage
const input = /* autocomplete search bar (hooks) input */;
const result = solve(input);
console.log(result);

// Edge case check
const empty = input ?? null;
const fallback = solve(input);
console.log(fallback);

// Expected: describe output shape, not the implementation
// (no solution code in preview)

Common pitfalls

Mutating inputs instead of returning a new value.
Skipping edge cases like empty input, duplicates, or nulls.
Overlooking time complexity for large inputs.