Project 64, Forms and input

Autocomplete Search

Suggestions that appear as you type, forgive small typos and work fully from the keyboard. The pattern behind every good site search.

Main API: ARIA combobox
Matching: Fuzzy scoring
Dependencies: None
Your browser: Checking

Search for a city

Type a city or country, even with a small typo. Use Up, Down, Enter and Escape. Recent searches show when the box is empty.

How it works

Score every itemA starts-with match scores highest, then contains, then a loose letter-by-letter match that allows a small gap, so dhka still finds Dhaka.
Combobox rolesThe input has role combobox and points to the listbox. aria-activedescendant tells screen readers which option is highlighted while focus stays in the box.
Wait a momentA short debounce means the list only updates after a pause in typing, which matters when results come from a server.

input.addEventListener("input", () => {
  clearTimeout(timer);
  timer = setTimeout(() => {
    const q = input.value.trim().toLowerCase();
    const results = data
      .map((item) => [item, score(q, item.name)])
      .filter(([, s]) => s > 0)
      .sort((a, b) => b[1] - a[1])
      .slice(0, 8);
    render(results);
  }, 120);
});
input.setAttribute("aria-activedescendant", "option-" + active);