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.

What you’ll build / What this tests

This premium vue coding focuses on Autocomplete Search (debounce + keyboard + outside click). You’ll apply vue and composition-api thinking with medium level constraints. The prompt emphasizes Build a Vue 3 autocomplete search input. It should debounce queries, show a dropdown with results,….

Learning goals

Translate the prompt into a clear vue API signature and return shape.
Apply vue, composition-api, reactivity techniques to implement autocomplete search (debounce + keyboard + outside click).
Handle medium edge cases without sacrificing readability.
Reason about time/space complexity and trade-offs in vue.

Key decisions to discuss

Define the exact input/output contract before coding.
Prioritize predictable edge-case handling over micro-optimizations.

Evaluation rubric

Correctness: covers required behaviors and edge cases.
Clarity: readable structure and predictable control flow.
Complexity: avoids unnecessary work for large inputs.
API discipline: no mutation of inputs; returns expected shape.
Testability: solution is easy to unit test.

Constraints / Requirements

Render the autocomplete UI as the main component.
Typing filters a fixed city list and shows results in a dropdown.
Debounce input by ~300ms before searching.
If query is empty (after trim): close dropdown and clear results.
If query is non-empty: open dropdown and show results.
Show up to 8 results.
Keyboard support: ArrowUp/ArrowDown to move active option, Enter to select, Esc to close.
Close dropdown on outside click.
Highlight the matched substring using (escape HTML first).
Show a 'Loading…' row while async search is pending (avoid flashing 'No results' during loading).

Mini snippet (usage only)

// Example usage
const input = /* autocomplete search (debounce + keyboard + outside click) input */;
const result = solve(input);
console.log(result);

// Edge case check
const empty = input ?? null;
const fallback = solve(input);
console.log(fallback);

// Expected: describe output shape, not the implementation
// (no solution code in preview)

Common pitfalls

Mutating inputs instead of returning a new value.
Skipping edge cases like empty input, duplicates, or nulls.
Overlooking time complexity for large inputs.