Autosuggest

Autosuggest er et tekstinputfelt som viser forslag mens brukeren skriver. Passer for søk og fritekstfelt med et endelig sett av gyldige valg.

Viktig informasjon

Forslagene filtreres ikke automatisk — du håndterer filtrering selv og oppdaterer suggestions-prop.

Props

Props
Prop	Type	Påkrevd	Standard	Beskrivelse
`label`Egendefinert	`string`	Ja	—	Synlig label over inputfeltet.
`suggestions`Egendefinert	`string[]`	Ja	—	Liste over forslag som vises under feltet.
`value`Native HTML	`string`	Nei	—	Kontrollert verdi.
`onChange`React	`(value: string) => void`	Nei	—	Kalles ved endring i inputverdien.
`onSelect`React	`(value: string) => void`	Nei	—	Kalles når brukeren velger et forslag.
`helpLabel`Egendefinert	`string`	Nei	—	Hjelpetekst vist under label.
`errorLabel`Egendefinert	`string`	Nei	—	Feilmelding vist under feltet.
`noSuggestionsText`Egendefinert	`string`	Nei	—	Tekst vist når ingen forslag matcher.

Utfasede props

Utfasede props
Prop	Type	Påkrevd	Standard	Beskrivelse
`leadText`EgendefinertUtfaset	`string`	Nei	—	Tekst over inputfeltet.
`noHitsMessage`EgendefinertUtfaset	`React.ReactNode`	Nei	—	Melding vist når ingen forslag matcher (gammel API).

Eksempler

Grunnleggende bruk

Autosuggest med statisk forslagsliste.

Hjemsted

Begynn å skrive for å se forslag

Interaktivt eksempel

Skriv i feltet for å filtrere forslag fra listen.

Med feilmelding

Autosuggest viser feilmelding når input er ugyldig.

Ingen treff-tekst

Viser tilpasset tekst når ingen forslag matcher det brukeren har skrevet.

Migrering

Disse eksemplene viser hvordan du erstatter utfasede props med den anbefalte API-en.

leadText og noHitsMessage er utfaset. Bruk helpLabel for hjelpetekst og noHits-objektet for ingen-treff-melding.

Finn denne koden

<Autosuggest
    label="Hjemsted"
    leadText="Begynn å skrive for å se forslag"
    noHitsMessage={<span>Ingen treff</span>}
    allItems={cities}
    onChange={setValue}
/>

Erstatt med dette

<Autosuggest
    label="Hjemsted"
    helpLabel="Begynn å skrive for å se forslag"
    noHits={{ items: [], text: "Ingen byer funnet – prøv et annet søk" }}
    allItems={cities}
    onChange={setValue}
/>