← Back to Challenge

Autocomplete / Typeahead

Build an autocomplete input that fetches suggestions from /api/v1/suggestions?q=query as the user types. Implement debouncing, keyboard navigation, and highlight matching text in the results.

Available keywords to search:

AppleApricotAvocadoBananaBlackberryBlueberryCherryCoconutCranberryDragon FruitFigGrapeGrapefruitGuavaKiwiLemonLimeLycheeMangoMelonNectarineOrangePapayaPassion FruitPeachPearPineapplePlumPomegranateRaspberryStrawberryTangerineWatermelon

Use mockSearchApi(query) to fetch suggestions. It returns a Promise that resolves after 300ms with matching fruit names. Your job: debounce the calls, render a dropdown, support keyboard nav (↑ ↓ Enter Esc), and highlight the matched text in each suggestion.