How do you handle ArrowDown at the last suggestion in an autocomplete?
Use Math.min to clamp: currentHighlight = Math.min(currentHighlight + 1, items.length - 1). This prevents the highlight from going beyond the last item.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in Autocomplete Keyboard Navigation Implementation
Track a currentHighlight index. ArrowDown increments (max: items.length - 1), ArrowUp decrements (min: 0), Enter selects the highlighted item, Escape closes. Toggle a 'highlighted' CSS class on the active item. Reset on new input.
If currentHighlight >= 0, prevent default and trigger the highlighted item's click: items[currentHighlight].click(). If no item is highlighted, let the form submit normally.
Hide the suggestions list: suggestions.style.display = 'none'. Reset the currentHighlight to -1. The user can type again to see new suggestions.
Still have questions?
Browse all our FAQs or reach out to our support team