Paradis For Designere Og Utviklere

Hvordan lage en datatalist som er umiddelbart søkbar

Dropdown-lister er en fin måte å gi alternativer til et inputfelt, spesielt når listen over tilgjengelige alternativer er lang. En bruker kan velge det alternativet de ønsker ved å skrive inn i feltet, eller se gjennom alternativene som kan være en kamp for det de leter etter. Å være i stand til å søke gjennom alternativene 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 allerede har skrevet noe inn i inntastingsfeltet.

Vi kan gjøre et inntastingsfelt mer brukbart hvis vi gjør det mulig for brukerne å få tilgang til den fullstendige 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 ved å bruke tag er det samme som id for 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 begynner å skrive inn et innspill i feltet som datalisten er knyttet til.

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

 datalist {display: block; }

De viste alternativene er ikke valgbare på dette tidspunktet, nettleseren gjør bare 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 finne et samsvarende alternativ .

Vi må også finne en mekanisme for å gjøre alle alternativer (på bildet over det som vises under rullegardinlisten), valgbare på et hvilket som helst annet punkt i inngangsprosessen - når brukere vil sjekke ut alternativene før de skriver noe, eller mens de ' Jeg har allerede 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 tilbakekoblingsmekanisme i nettlesere som ikke støtter element. Når en nettleser ikke kan gjengi og vise datalisten, gjør den den HTML-kode, ser koden ut nedenfor:

For å se alle valgene for å select i rullegardinlisten, må vi bruke attributene multiple til å vise mer enn ett alternativ og size for antall alternativer vi vil vise.

 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 fraværet av en direkte måte å style på  element med CSS (utseendet til  og