Hvordan lage en datatalist som er umiddelbart søkbar

Dropdown lister er en fin måte for gir alternativer for et inntastingsfelt, spesielt når listen over tilgjengelige alternativer er lang. En bruker kan velge det alternativet de vil ha ved skriver inn i feltet, eller se gjennom alternativene Det kan være en kamp for det de leter etter. Å kunne søke gjennom alternativene, Det er imidlertid den ideelle løsningen.

Denne oppførselen kan oppnås med HTML element som viser innspillingsforslag for forskjellige kontroller, for eksempel stikkord. derimot Viser bare tilgjengelige alternativer når brukeren har har allerede skrevet noe inn i inngangsfeltet.

Vi kan gjøre et inntastingsfelt mer brukbart hvis vi aktiverer brukerne få tilgang til hele listen over alternativer når som helst under inntaksprosessen.

I dette innlegget skal vi se hvordan du lager en rullegardinliste som kan søkes når som helst bruker stikkord er det samme som de id av tag - slik binder vi dem til hverandre.

2. Gjør Datalist Synlig

Som standard er HTML-elementet er skjult. Vi kan bare se det, når vi begynn å skrive inn en inngang i feltet er datalisten knyttet til.

Men det er en måte å "tvinge" innholdet til datalisten (dvs. alle sine alternativer) å vises på nettsiden. Vi trenger bare å gi det et passende vise Eiendomsverdi annet enn ingen, for eksempel display: block;.

 datalist display: block;

De viste alternativene er ikke valgbare ennå på dette punktet bare nettleseren gjør alternativene den finner i datalisten.

Som nevnt, på grunn av den innebygde oppførselen til element, En del av alternativene vises allerede og kan velges, men bare når brukeren begynner å skrive inn en streng som nettleseren kan finn et matchende alternativ.

Vi må også finne en mekanisme å lage alle alternativer (på ovenstående skjermbilde som vises under rullegardinlisten) valgbar på ethvert annet punkt i inngangsprosessen - når brukerne vil sjekke ut alternativene før de skriver noe, eller mens de allerede har tatt noe inn i feltet.

3. Ta inn HTML-element.

Vi velger den andre metoden, da det er enklere, og det er lov å bli brukt som en tilbakekallingsmekanisme i nettlesere som ikke støtter element. Når en nettleser ikke kan gjengi og vise datalisten, vil den gjør det HTML-kode, ser koden ut nedenfor:

Datalist kombinert med Legge til flere attributt til tag, slik at når brukeren velger et alternativ fra rullegardinlisten, vil verdien bli vist inni feltet også. / * når bruker velger et alternativ fra DDL, skriv det til tekstfelt * / select.addEventListener ('change', fill_input); funksjon fill_input () input.value = alternativer [this.selectedIndex] .value; hide_select (); ulempene Den største ulempen ved denne teknikken er den Fravær av en direkte måte å stilte på element med CSS (utseendet til og