Sådan oprettes en datatalist, der er øjeblikkeligt søgbar

Dropdown lister er en pæn måde for giver muligheder for et inputfelt, især når listen over tilgængelige muligheder er lang. En bruger kan vælge den mulighed, de ønsker med skriver ind i feltet, eller se gennem mulighederne det kan være en kamp for, hvad de leder efter. At kunne søge gennem mulighederne, Det er dog den ideelle løsning.

Denne adfærd kan opnås med HTML element som viser inputforslag til forskellige kontroller, som f.eks tag. Imidlertid Viser kun de tilgængelige indstillinger, når brugeren har har allerede skrevet noget ind i inputfeltet.

Vi kan gøre et indtastningsfelt mere brugbart, hvis vi gør det muligt for brugerne at få adgang til hele listen over muligheder når som helst under indlæsningsprocessen.

I dette indlæg vil vi se, hvordan du opretter en rulleliste, der kan søges når som helst bruger tag er det samme som det id af tag - sådan knytter vi dem til hinanden.

2. Gør datatalisten synlig

Som standard er HTML element er skjult. Vi kan kun se det, når vi Begynd at skrive en indtastning ind i feltet, datalisten er knyttet til.

Men der er en måde at "tvinge" indholdet af datalisten (dvs. alle sine muligheder) at blive vist på websiden. Vi behøver kun at give det et passende Skærm ejendomsværdi andet end ingen, for eksempel display: block;.

 datalist display: block;

De viste muligheder er endnu ikke valgbare på dette tidspunkt kun browseren gør mulighederne det findes inden for datalisten.

Som nævnt på grund af den indbyggede opførsel af element, En del af indstillingerne vises allerede og kan vælges, men kun når brugeren begynder at skrive en streng, som browseren kan find en matchende mulighed.

Vi skal også finde en mekanisme til at lave alle indstillinger (på ovenstående skærmbillede vises under dropdown datalisten) valgbar på et hvilket som helst andet punkt i processen til at tage input - når brugere vil tjekke mulighederne, før de skriver noget, eller mens de allerede har taget noget i inputfeltet.

3. Tag ind i HTML-element.

Vi vælger den anden metode, da den er enklere, og den må bruges som en tilbageslagsmekanisme i browsere, der ikke understøtter element. Når en browser ikke kan gøre og vise datalisten, skal den gør det HTML-kode, ser koden ud nedenfor:

Datalistisk kombineret med Tilføjelse af mange attribut til tag, så når brugeren vælger en valgmulighed på rullelisten, vises dens værdi inde i felt også. / * Når bruger vælger en indstilling fra DDL, skriv den til tekstfelt * / select.addEventListener ('change', fill_input); funktion fill_input () input.value = options [this.selectedIndex] .value; hide_select (); Ulemper Den største ulempe ved denne teknik er den fravær af en direkte måde at style the element med CSS (udseendet af og