Näppäimistönavigointi ehdotuslistoissa

Näppäimistökäsittelijä liitetään tekstikentän onKeyDown-tapahtumaan, ei vanhentuneeseen onKeyPress- tai onKeyUp-tapahtumaan. keyDown laukeaa ennen kuin merkki ilmestyy tekstikenttään, joten ArrowDown-, ArrowUp-, Enter- ja Escape-näppäimet voidaan käsitellä ennen selaimen oletustoimintaa.

Kun käyttäjä painaa ArrowDown-näppäintä, selectedIndex-arvoa kasvatetaan yhdellä ja sen ylärajaksi rajoitetaan suggestions.length - 1: setSelectedIndex(prev => Math.min(prev + 1, suggestions.length - 1)). Lisäksi kutsutaan e.preventDefault(), jotta kohdistin ei siirry tekstikentän tekstin loppuun. Tämä on selaimen oletustoiminta, kun ArrowDown-näppäintä painetaan tekstikentässä.

Kun käyttäjä painaa ArrowUp-näppäintä, selectedIndex-arvoa pienennetään yhdellä ja sen alarajaksi rajoitetaan 0: setSelectedIndex(prev => Math.max(prev - 1, 0)). Arvon voi myös rajoittaa arvoon -1, joka tarkoittaa, ettei mitään ole valittu. Tällöin käyttäjä voi poistaa valinnan ja jatkaa kirjoittamista vapaasti indeksin 0 yläpuolelle siirryttäessä.

Kun Enter-näppäintä painetaan ja selectedIndex >= 0, korostettu ehdotus valitaan: inputValue asetetaan arvoon suggestions[selectedIndex], pudotusvalikko suljetaan ja selectedIndex nollataan arvoon -1. Jos mitään ehdotusta ei ole korostettu (selectedIndex on -1), tavallisen lomakkeen lähetyksen tai haun annetaan jatkua.

Kun Escape-näppäintä painetaan, pudotusvalikko suljetaan asettamalla isOpen arvoon false ja selectedIndex nollataan arvoon -1. Syötteen arvoa ei tyhjennetä: käyttäjä haluaa vain sulkea ehdotukset valitsematta mitään ja säilyttää kirjoittamansa tekstin jatkomuokkausta varten.

Kun Tab-näppäintä painetaan, pudotusvalikko suljetaan, koska selain siirtää fokuksen joka tapauksessa seuraavaan kohdistettavaan elementtiin. Asettamalla isOpen arvoon false Tab-näppäimen yhteydessä varmistetaan, ettei pudotusvalikko jää auki fokuksen siirtyessä pois tekstikentästä. Kutsua preventDefault() ei tarvita, vaan selaimen annetaan käsitellä normaali sarkainjärjestys.

Korostetun ehdotuksen on erotuttava visuaalisesti. Aktiivista tyyliä käytetään ehdotukseen, jonka indeksi on selectedIndex: className={index === selectedIndex ? 'suggestion suggestion--active' : 'suggestion'}. Aktiivisessa tilassa taustaväriä yleensä muutetaan, jotta on selvää, mikä kohde valitaan Enter-näppäintä painettaessa.

Kun ehdotusluettelolla on enimmäiskorkeus ja sitä vieritetään, korostettu kohde voi näppäimistöllä liikuttaessa vierittyä pois näkyvistä. Tallenna ehdotusten DOM-elementit ref-taulukkoon ja kutsu listItemRefs.current[selectedIndex]?.scrollIntoView({ block: 'nearest' }) aina, kun selectedIndex muuttuu. nearest-lohkoarvo minimoi vierityksen määrän.

Kun syöte muuttuu ja uusi suodatettu luettelo tulee näkyviin, selectedIndex nollataan arvoon -1 saman tilapäivityksen yhteydessä tai useEffect-hookissa, jonka riippuvuutena ehdotukset ovat. Vanhentuneet indeksit, jotka viittaavat poistettuihin kohteisiin, saisivat käyttäjän valitsemaan väärän ehdotuksen.

Täydellinen käyttäjäkulku on seuraava: käyttäjä kirjoittaa suodattaakseen ehdotuksia, ArrowDown korostaa ensimmäisen kohteen, seuraavat ArrowDown-painallukset siirtävät korostusta listassa alaspäin, ArrowUp siirtää sitä takaisin ylöspäin, Enter valitsee korostetun kohteen ja Escape sulkee ehdotukset tekemättä valintaa. Tämä kattaa kaikki vakiomuotoiset näppäimistökäytön toimintatavat, joita käyttäjät autocomplete-kentältä odottavat.

Kutsukaa aina e.preventDefault(), kun tekstikentän sisällä käsitellään ArrowDown- tai ArrowUp-näppäintä. Ilman tätä ArrowDown siirtää tekstikohdistimen loppuun ja ArrowUp alkuun. Nämä kohdistimen liikkeet olisivat ristiriidassa selectedIndex-navigoinnin kanssa ja aiheuttaisivat hämmentävää toimintaa.

Käsittele syötteen onKeyDown-tapahtuma. ArrowDown kasvattaa selectedIndex-arvoa (ylärajaan rajattuna), ArrowUp pienentää sitä (alarajaan 0 tai -1 rajattuna), Enter valitsee korostetun kohteen, Escape sulkee valikon tekemättä valintaa ja Tab sulkee valikon sekä antaa selaimen siirtää kohdistuksen. Kutsu aina preventDefault-metodia nuolinäppäimille ja vieritä korostettu kohde näkyviin.