Autocomplete Keyboard Navigation Implementation

Autocomplete Keyboard Navigation Implementation

Keyboard navigation is a must for autocomplete. Here is how to implement it.

Keys to Handle

• ArrowDown: move highlight to the next suggestion.
• ArrowUp: move highlight to the previous suggestion.
• Enter: select the highlighted suggestion.
• Escape: close the suggestions.

Implementation

let currentHighlight = -1;

input.addEventListener("keydown", (e) => {
  const items = suggestions.querySelectorAll(".suggestion-item");
  if (items.length === 0) return;

  if (e.key === "ArrowDown") {
    e.preventDefault();
    currentHighlight = Math.min(currentHighlight + 1, items.length - 1);
  } else if (e.key === "ArrowUp") {
    e.preventDefault();
    currentHighlight = Math.max(currentHighlight - 1, 0);
  } else if (e.key === "Enter" && currentHighlight >= 0) {
    e.preventDefault();
    items[currentHighlight].click();
  } else if (e.key === "Escape") {
    suggestions.style.display = "none";
    currentHighlight = -1;
  }

  items.forEach((item, i) => {
    item.classList.toggle("highlighted", i === currentHighlight);
  });
});

Reset on Input

input.addEventListener("input", () => {
  currentHighlight = -1; // reset highlight on new input
});

CSS for Highlighted State

.suggestion-item.highlighted {
  background: #007bff;
  color: white;
}

Edge Cases

• No suggestions (do nothing on arrow keys).
• Highlight at the top (ArrowUp stays at 0).
• Highlight at the bottom (ArrowDown stays at last).
• Enter with no highlight (do nothing or submit the form).
• Reset highlight on new input.

The Takeaway

Keyboard navigation: track currentHighlight index. ArrowDown increments (max: last item), ArrowUp decrements (min: 0), Enter selects the highlighted item, Escape closes. Toggle a 'highlighted' CSS class. Reset highlight on new input. Handle edge cases (no suggestions, boundaries).