55. Typeahead Autocomplete II - Async Suggestions

Build a Typeahead Autocomplete component that fetches results asynchronously as the user types. It must handle debouncing, loading states, keyboard navigation, and prevent stale responses from overriding newer results.

New Features

1. Async Fetch + Debounce

• Call fetchSuggestions(query) after a 300ms debounce
• Do not fetch for queries shorter than 2 characters
• Show a loading indicator while the request is in-flight

2. Race-Condition Handling

• If the user types quickly, ensure older responses never overwrite newer ones
• Use AbortController or a request ID to ignore stale results

3. UX + Accessibility

• Keyboard navigation (Arrow Up/Down, Enter, Escape)
• Highlight matching text in results
• ARIA combobox roles and aria-activedescendant
• Clear button resets input and results

4. Example Data

type Suggestion = { id: string; label: string; meta?: string };

interface TypeaheadProps {
  fetchSuggestions: (query: string, signal?: AbortSignal) => Promise<Suggestion[]>;
  onSelect?: (value: Suggestion) => void;
  placeholder?: string;
}

1. Async: Debounced fetch with minimum query length
2. Correctness: Stale responses never replace newer ones
3. UX: Loading, empty state, keyboard navigation
4. Accessibility: Proper ARIA roles and focus management