Typeahead Search
Design low-latency search suggestions with cancellation and accessible keyboard flow.
Quick take: Use debounce + abort + stale guards.
Production notes: Implement ARIA combobox roles and active descendant.
TL;DR
Minimize perceived latency with prefetch + debounce while preserving correct result ordering.
C - Collect
- Max query length? multi-language tokenization?
- Is keyboard-only flow a hard requirement?
C - Component structure
- Input controller, suggestion list, result preview.
D - Data modeling
- Cache by normalized query.
- Store query token to reject stale response payloads.
A - API design
GET /search/suggest?q=...with server-side rank.- Return request token to aid stale checks.
O - Optimization
- Prefetch common prefixes.
- Keep SR announcements concise for result count changes.
Testing + Accessibility Rubric
| Category | Level | Requirement | Done When |
|---|---|---|---|
| functional | unit | Debounce/cancel behavior avoids stale result rendering. | Typing burst tests prove stale response protection. |
| a11y | integration | Combobox roles, active descendant, and keyboard bindings are correct. | ARIA combobox checks pass in automated and manual tests. |
| a11y | e2e | Result count and active option are announced clearly. | Screen reader walkthrough validates interaction end-to-end. |