Autocomplete · suggestions
A free-text field that suggests as you type — highlighted matches, an inline completion to accept with Tab, groups, custom rows, async sources with debounce, abort and a spinner, and recent searches.
Grouped by region · accents don't matter · Tab takes the grey completion
A slow server (350–800 ms) · stale answers are dropped · focus it empty for recent picks
@
Values: — · — · — · —
Usage
import { signal, html } from "./index.js";import { Autocomplete } from "./components/autocomplete.js"; const q = signal(""); // the text is the value; a suggestion fills it inAutocomplete({ value: q, label: "Country", source: countries, // [{ label, icon, description, group }] onSelect: (c) => go(c), onSubmit: (text) => search(text) }) // a function source may be async; it's debounced, aborted and never overwritten by a stale answerAutocomplete({ source: (q, { signal }) => fetch("/api/cities?q=" + q, { signal }).then((r) => r.json()), recent: "city-searches" }) // offers the last picks on an empty field Autocomplete({ source: languages, match: "prefix", limit: 6 }) // "contains" (default) | "prefix" | "words"Autocomplete({ source: people, row: (p, hl) => html`<b>${hl(p.label)}</b> @${p.handle}` })// ↑ ↓ walk the list · Enter takes it · Tab or → takes the grey completion · Esc closes, then clears