Premium

Autocomplete Search (debounce + keyboard + outside click)

By FrontendAtlas Team · Updated Jan 30, 2026

Build a Vue 3 autocomplete search input. It should debounce queries, show a dropdown with results, support keyboard navigation (↑/↓/Enter/Esc), and close on outside click. Keep the UI styles exactly as provided.

  • Render the autocomplete UI as the main component.
  • Typing filters a fixed city list and shows results in a dropdown.

Challenge preview

Autocomplete Search (debounce + keyboard + outside click): Build a Vue 3 autocomplete search input. It should debounce queries, show a dropdown with results, support keyboard navigation (↑/↓/Enter/Esc), and close on outside…. Expect vue and composition-api decisions under intermediate level constraints.

Premium unlocks

  • Full editor workflow with starter files, tests, and solution context.
  • Edge cases, common mistakes, and complexity notes for the interview discussion.
  • Progress tracking once you unlock and complete the challenge.

Free warm-up options

Upgrade to FrontendAtlas Premium to unlock this challenge. Already upgraded? Sign in to continue.