Free-text autocomplete with async race guards, keyboard browsing, and automatic theming. The input stays yours — suggestions assist, they never constrain. Every card below is live.
Local filtering, diacritic-insensitive, match highlighted. Try “sao” or “zur”.
new Autocomplete('#city', {
source: ['Amsterdam', 'São Paulo', 'Zürich', …],
onSelect: item => use(item.value)
})
A fake API with 300–1200 ms latency. Type fast: the loading row shows while pending, and answers for superseded queries are discarded — a slow “ap” can never overwrite “apple”.
new Autocomplete('#fruit', {
source: q => slowApi(q), // Promise — or fn(q, done)
onError: e => console.warn(e)
})
Items with a group render under uppercase headers,
exactly like Select.
source: [
{ value: 'js', label: 'JavaScript', group: 'Dynamic' },
{ value: 'rs', label: 'Rust', group: 'Compiled' },
…
]
Type @al… free text stays valid — pick a teammate or
invent a brand-new handle, both land as chips on Enter.
new Autocomplete('#mention', {
source: q => users(q.replace(/^@/, '')),
allowNew: true, // the default — new handles are fine
onSelect: item => addChip(item.value)
})
Focus the empty field: recents appear before you type a single character. Selecting or submitting adds to the list.
new Autocomplete('#recent', {
source: () => recents, // empty query → the whole list
openOnFocus: true
})
With the VC core loaded, one call themes every component.
VC.config({ accent: '#b45309' })
// or per page, no core needed:
.vac { --vac-accent: #b45309; }