Autocomplete Search Bar: Complete Interview Checklist
The complete checklist for building an autocomplete in a machine coding interview.
Autocomplete Search Bar: Complete Interview Checklist
Core Features
- Input field with suggestions list.
- Debounce (300ms) to avoid excessive API calls.
- Filter/fetch suggestions based on input.
- Render suggestions in a dropdown list.
- Click a suggestion to select it.
- Click outside to close the dropdown.
Advanced Features
- Keyboard navigation (ArrowUp/Down, Enter, Escape).
- Highlight matching text in suggestions.
- Loading state ("Loading...").
- No results state ("No results found").
- Caching (avoid duplicate API calls).
- Cancel previous requests (AbortController).
Accessibility
- role="combobox" on container.
- aria-expanded (true/false).
- aria-autocomplete="list".
- aria-activedescendant (highlighted item).
- role="option" on each suggestion.
CSS
- Absolute positioning for suggestions.
- Hover state on suggestion items.
- Highlighted state (different background).
- Max height with scroll for long lists.
- Loading and no-results styling.
Testing
- Test: typing shows suggestions.
- Test: debounce delays the fetch.
- Test: arrow keys navigate.
- Test: Enter selects.
- Test: Escape closes.
- Test: click outside closes.
- Test: no results shows message.
- Test: empty input clears suggestions.
The Takeaway
Checklist: core (input, debounce, fetch, render, select, click-outside), advanced (keyboard, highlight, loading, no-results, caching, cancellation), accessibility (ARIA combobox/option), CSS (absolute, hover, highlighted, scroll), and testing (typing, debounce, keys, enter, escape, click-outside, no results, empty input).
Core (input, debounce 300ms, fetch, render, select, click-outside), advanced (keyboard nav, highlight, loading, no-results, caching, AbortController), accessibility (ARIA combobox/option), CSS (absolute, hover, highlighted, scroll), and testing (typing, debounce, keys, enter, escape, click-outside, no results, empty).
Input with suggestions list, debounce (300ms), fetch/filter suggestions, render dropdown, click to select, and click outside to close. These are the minimum. Keyboard navigation and highlighting are strong bonuses.
Keyboard navigation (arrow keys, enter, escape), highlight matching text, loading state, no results state, caching (Map), and AbortController for cancelling previous requests. These show depth and production-readiness.
Test typing (shows suggestions), debounce (delays fetch), arrow keys (navigate), Enter (selects), Escape (closes), click outside (closes), no results (shows message), and empty input (clears suggestions). Test each feature and edge case.
role='combobox' and aria-expanded on the container. role='textbox', aria-autocomplete='list', aria-controls, aria-activedescendant on the input. role='option' and aria-selected on each suggestion. Update aria-expanded and aria-activedescendant via JavaScript.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.