Frontendx
README.md
SOLUTION.md
main.tsxentry
App.tsx
App.css
index.html
vite.config.ts
Installed
react@^19.2.0
react-dom@^19.2.0

Build a Search Input with Live Autocomplete Suggestions Dropdown in React

Prompt

Implement a search input field in React that shows a dropdown of filtered or API-fetched suggestions as the user types. Debounce the input to reduce API calls. Support keyboard navigation through the list: ArrowUp/ArrowDown to move the highlight, Enter to select a suggestion, and Escape to close the dropdown. Show a loading spinner while fetching and a 'No results' message when empty. Close the dropdown when the user clicks outside the component.

Wrap the input handler in a debounce function to delay API calls.
Test Results

Build a Search Input with Live Autocomplete Suggestions Dropdown in React

Implement a search input field in React that shows a dropdown of filtered or API-fetched suggestions as the user types. Debounce the input to reduce API calls. Support keyboard navigation through the list: ArrowUp/ArrowDown to move the highlight, Enter to select a suggestion, and Escape to close the dropdown. Show a loading spinner while fetching and a 'No results' message when empty. Close the dropdown when the user clicks outside the component.