Autocomplete
@/components/ui/Autocomplete
Chromet for «nedtrekk med søk»: felt + resultatliste med full piltastnavigasjon og en ekte WAI-ARIA-combobox.
Når brukes den
Bruk når brukeren skal søke i en dynamisk eller lang liste og velge ett treff (bygg, leverandør, adresse).
Søk-logikk, endepunkt og debounce eies av kallstedet — onQuery kalles rått på hvert tastetrykk, results/busy er kontrollerte props.
Bygget oppå Popover (bredde="trigger"), så mobil-ark og tastaturhøyde-unnvikelse følger med gratis.
Ikke bruk til «velg én av et lite, fast sett» — det er Dropdown (ingenting å skrive) eller PillTabs/Select.
Ikke bygg en ny «søk med nedtrekk»-kopi — BrregSearch er allerede bygget oppå denne for Brønnøysund-oppslag.
Eksempler
Søk i en lokal liste
Fokus blir i feltet hele tiden; det aktive treffet pekes ut med aria-activedescendant i stedet for at fokus flyttes inn i listen.
<Autocomplete
value={query}
onQuery={q => { setQuery(q); setResults(sok(q)) }}
results={results}
onSelect={item => velg(item)}
renderItem={(item, { active }) => <Rad item={item} active={active} />}
itemKey={item => item.id}
placeholder="Søk etter bygg …"
ariaLabel="Søk etter bygg"
/>Laster (busy)
Spinner i feltet mens kallstedets søk pågår — vises uavhengig av om panelet er åpent.
Deaktivert
Feltet er fokuserbart, men tar ikke imot tekst eller åpner panelet — for et oppslag som midlertidig ikke er tilgjengelig.
Props
Sveip tabellen for å se hele innholdet