Gecontroleerde input met suggestielijst

Een component voor automatisch aanvullen bestaat uit twee hoofdonderdelen: een gecontroleerd tekstinvoerveld en een vervolgkeuzelijst met suggesties. Het invoerveld staat in de normale documentstroom en de vervolgkeuzelijst wordt absoluut direct eronder geplaatst. Samen werken ze als één interactief onderdeel, ook al zijn het afzonderlijke DOM-elementen.

Je hebt vier statusvariabelen nodig: inputValue (string — wat er is getypt), suggestions (array — de huidige overeenkomende items), isOpen (boolean — of de vervolgkeuzelijst zichtbaar is) en selectedIndex (number — welke suggestie voor toetsenbordnavigatie is gemarkeerd; begint op -1 als niets is geselecteerd).

Maak het invoerveld volledig gecontroleerd: value={inputValue} en onChange={e => setInputValue(e.target.value)}. Zo houdt React volledige controle over de weergegeven tekst. Elke toetsaanslag werkt de status bij, waardoor het onderdeel opnieuw wordt gerenderd met de nieuwe waarde. Gebruik nooit een ongecontroleerd invoerveld voor automatisch aanvullen — je moet de waarde programmatisch kunnen lezen en instellen.

Wanneer suggesties uit een lokale lijst komen, filter je bij elke render op basis van inputValue: vergelijk elk item met item.toLowerCase().includes(inputValue.toLowerCase()). Je kunt dit met useMemo berekenen als de lijst groot is, zodat je niet bij elke nieuwe render opnieuw hoeft te berekenen. Voor kleine lijsten is filteren in de component zelf prima.

Open de vervolgkeuzelijst wanneer inputValue.length > 0 en suggestions.length > 0. Sluit haar wanneer het invoerveld de focus verliest (met een kleine vertraging zodat klikken op een suggestie eerst kan worden verwerkt), wanneer een suggestie is geselecteerd of wanneer de Escape-toets wordt ingedrukt. Stel isOpen overeenkomstig in om de voorwaardelijke weergave aan te sturen.

De gebeurtenis onBlur wordt geactiveerd wanneer het invoerveld de focus verliest, bijvoorbeeld wanneer de gebruiker op een suggestie klikt. Als je de vervolgkeuzelijst onmiddellijk bij focusverlies sluit, wordt de klik op de suggestie nooit verwerkt omdat de lijst verdwijnt voordat de klik plaatsvindt. Gebruik setTimeout(() => setIsOpen(false), 150) zodat de klik tijd krijgt om te worden verwerkt.

Plaats de vervolgkeuzelijst met position: absolute, zodat deze over de inhoud onder het invoerveld heen valt in plaats van die omlaag te duwen. Stel een hoge z-index in (100+) zodat de lijst boven andere inhoud verschijnt. Stel een max-height in met overflow-y: auto om te voorkomen dat de lijst te hoog wordt wanneer er veel resultaten zijn.

Elk suggestie-item moet een onClick-afhandelaar hebben: onClick={() => { setInputValue(suggestion); setIsOpen(false); }}. Hiermee stel je de invoer in op de geselecteerde suggestie en sluit je de vervolgkeuzelijst. De selectie voelt onmiddellijk en natuurlijk aan, zoals gebruikers verwachten van velden voor automatisch aanvullen.

Een alternatief voor de time-out bij focusverlies is onMouseDown={e => e.preventDefault()} op elk suggestie-item. Hiermee voorkom je dat de gebeurtenis mousedown de focus van het invoerveld overneemt, zodat focusverlies niet optreedt wanneer je op een suggestie klikt. Het invoerveld behoudt de focus en de klikafhandelaar wordt correct uitgevoerd.

Een goede functie voor automatisch aanvullen moet met het toetsenbord te bedienen zijn. De gebruiker moet op ArrowDown kunnen drukken om de eerste suggestie te markeren, verder kunnen drukken om door de lijst te gaan, op Enter kunnen drukken om te selecteren en op Escape kunnen drukken om te sluiten zonder te selecteren. Je implementeert dit door onKeyDown op het invoerelement af te handelen.

Stel selectedIndex telkens opnieuw in op -1 wanneer de gebruiker typt en inputValue verandert. Hiermee verwijder je een eerdere toetsenbordselectie, zodat de nieuwe reeks gefilterde suggesties met niets gemarkeerd begint. Een verouderde selectie-index die na een wijziging van de lijst naar een ander item verwijst, is verwarrend en onjuist.

Een onderdeel voor automatisch aanvullen heeft vier statusvariabelen nodig: inputValue, suggestions, isOpen en selectedIndex. Gebruik een gecontroleerd invoerveld, filter suggesties op basis van de invoer en beheer de zichtbaarheid van de vervolgkeuzelijst via isOpen. Los de raceconditie waarbij focusverlies vóór de klik plaatsvindt op met een time-out of met onMouseDown en preventDefault. Stel selectedIndex telkens opnieuw in wanneer de invoer verandert.