Kontrollert inndatafelt med forslagsliste

En autocomplete-komponent har to hoveddeler: et kontrollert inndatafelt og en nedtrekksliste med forslag. Inndatafeltet ligger i den normale dokumentflyten, mens nedtrekkslisten er absolutt posisjonert rett under det. Sammen fungerer de som én interaktiv widget, selv om de er separate DOM-elementer.

Det trengs fire tilstandsvariabler: inputValue (streng – det som er skrevet inn), suggestions (array – gjeldende samsvarende elementer), isOpen (boolsk verdi – om nedtrekkslisten er synlig) og selectedIndex (tall – hvilket forslag som er uthevet for tastaturnavigering, med startverdien -1 når ingen er valgt).

Gjør inndatafeltet fullt ut kontrollert: value={inputValue} og onChange={e => setInputValue(e.target.value)}. Dette gir React full kontroll over teksten som vises. Hvert tastetrykk oppdaterer tilstanden, noe som utløser en ny rendering med den nye verdien. Bruk aldri et ukontrollert inndatafelt i autocomplete – det er nødvendig å kunne lese og angi verdien programmatisk.

Når forslagene kommer fra en lokal array, filtrerer du ved hver rendering basert på inputValue: sammenlign hvert element ved å bruke item.toLowerCase().includes(inputValue.toLowerCase()). Dette kan beregnes med useMemo hvis listen er stor, slik at unødvendige beregninger ved hver nye rendering unngås. For små lister er filtrering direkte i renderingen tilstrekkelig.

Åpne nedtrekkslisten når inputValue.length > 0 og suggestions.length > 0. Lukk den når inndatafeltet mister fokus (med en kort forsinkelse slik at klikk på forslag rekker å registreres først), når et forslag velges, eller når Escape-tasten trykkes. Angi isOpen tilsvarende for å styre den betingede renderingen.

onBlur-hendelsen utløses når inndatafeltet mister fokus, noe som skjer når brukeren klikker på et forslag. Hvis nedtrekkslisten lukkes umiddelbart ved blur, blir klikket på forslaget aldri registrert fordi listen forsvinner før klikkhendelsen utløses. Bruk setTimeout(() => setIsOpen(false), 150) for å gi klikket tid til å registreres.

Posisjoner nedtrekkslisten med position: absolute slik at den legges over innholdet under inndatafeltet i stedet for å skyve det nedover. Angi en høy z-index (100+) slik at den vises over annet innhold. Angi en max-height med overflow-y: auto for å hindre at listen blir for høy når det finnes mange resultater.

Hvert forslagselement bør ha en onClick-behandler: onClick={() => { setInputValue(suggestion); setIsOpen(false); }}. Dette setter inndatafeltet til det valgte forslaget og lukker nedtrekkslisten. Valget føles umiddelbart og naturlig, i tråd med oppførselen brukere forventer fra autocomplete-felt.

Et alternativ til en blur-forsinkelse er å bruke onMouseDown={e => e.preventDefault()} på hvert forslagselement. Dette forhindrer at mousedown stjeler fokus fra inndatafeltet, slik at blur-hendelsen ikke utløses når et forslag klikkes. Inndatafeltet beholder fokuset, og klikkbehandleren utløses uten problemer.

God autocomplete må kunne navigeres med tastaturet. Brukeren skal kunne trykke på ArrowDown for å utheve det første forslaget, fortsette å trykke for å bevege seg nedover i listen, trykke på Enter for å velge og trykke på Escape for å lukke uten å velge. Dette implementeres ved å håndtere onKeyDown på inndataelementet.

Hver gang brukeren skriver og inputValue endres, tilbakestilles selectedIndex til -1. Dette fjerner tidligere tastaturvalg, slik at det nye settet med filtrerte forslag starter uten utheving. En foreldet utvalgsindeks som peker på et annet element etter at listen er endret, er forvirrende og feil.

En autocomplete-widget trenger fire tilstandsvariabler: inputValue, suggestions, isOpen og selectedIndex. Bruk et kontrollert inndatafelt, filtrer forslag basert på inndata, og styr synligheten til nedtrekkslisten via isOpen. Håndter kappløpet mellom blur og klikk med enten et tidsavbrudd eller onMouseDown preventDefault. Tilbakestill selectedIndex hver gang inndata endres.