Implement debounced async autocomplete input

Q: Implement debounced async autocomplete input

This question evaluates proficiency in frontend engineering skills including asynchronous data fetching, debouncing, state and event management, keyboard accessibility, and techniques to prevent stale async responses.

Q: How do I approach Other / Miscellaneous interview questions?

Other / Miscellaneous questions require understanding of core concepts and practice. PracHub provides solutions with explanations to help you master other / miscellaneous interviews.

Question

Implement an Autocomplete Input Component (Frontend Technical Screen)

Context

Build an autocomplete input from scratch (no UI libraries). You may use plain JavaScript or a framework like React. Assume you can call an async function to fetch suggestions from a server.

Assume an API like:

fetchSuggestions(query: string, signal?: AbortSignal): Promise<string[]> — resolves to a list of suggestion strings; rejects on network error; supports abort via AbortController.

Requirements

Debounce user keystrokes to avoid excessive network calls.
Perform asynchronous fetches for suggestions; handle loading, errors, and empty results; prevent stale responses from overwriting newer ones.
Render a suggestions list under the input with proper focus management.
Support keyboard navigation:
- Up/Down arrows move the active index.
- The active option is visually highlighted.
- Enter selects/submits the active option.
Describe your event-handler and state design: what states you keep, how they transition, and how you wire input, list, and keyboard events.

Implement debounced async autocomplete input

Implement an Autocomplete Input Component (Frontend Technical Screen)

Context

Requirements

Solution

Comments (0)

Implement debounced async autocomplete input

Overview

Implement an Autocomplete Input Component (Frontend Technical Screen)

Context

Requirements

Solution

Comments (0)