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 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 og HTML-elementer og litt JavaScript.
1. Lag en datatalist med alternativer Først oppretter vi en datalist for ulike tekstredigerere. Kontroller at verdien av listattributtet til er det samme som id for tag - slik binder vi dem til hverandre.
Atom brak~~POS=TRUNC Notisblokk ++ Notisblokk Sublim tekst TextEdit Textmate Notisblokk 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 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 .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 Det er to måter å gjøre det mulig for brukere å se og velge alle alternativene når de vil:
Vi kan legge til en klikkhendelseshåndterer til hvert alternativ, og bruk den til å velge et alternativ når det klikkes på, eller vi kan også omforme alternativene til en ekte rullegardinliste , som som standard kan velges. Vi kan pakke inn alternativene til datalisten med 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 element med alle sine alternativer i stedet.
Som standard vises ikke valgelementet i nettlesere som støtter datalisten, det vil si til vi tvinger datalisten til å gjengi innholdet med display: block; CSS regel.
Så, når vi pakker inn alternativene fra eksemplet ovenfor (hvor datalisten har display:block ) med HTML-kode, ser koden ut nedenfor:
Atom brak~~POS=TRUNC Notisblokk ++ Notisblokk Sublim tekst TextEdit Textmate Notisblokk se alle valgene for å select i rullegardinlisten, må vi bruke attributene multiplesizeDen fullstendige rullegardinlisten skal bare vises når brukeren klikker en svingknapp ved siden av inntastingsfeltet, mens brukeren skriver arbeidsdatabasen vises. La oss endre display til datalisten til none, og også legge til en knapp ved siden av inntastingsfeltet, som vil bytte display til datalisten, og dermed utløse utseendet til select .
datalist {display: none; } Vi må også legge til følgende knapp over datalisten i HTML-filen:
à ¢ Å-¼ La oss nå se JavaScript. Først definerer vi de første variablene .
knapp = document.querySelector ('button'); datalist = document.querySelector ('datalist'); select = document.querySelector ('select'); alternativer = select.options; Deretter må vi legge til en hendelseslytter ( toggle_ddl ) til klikkhendelsen på knappen som vil skifte utseende på datalisten .
button.addEventListener ('klikk', toggle_ddl); Deretter definerer vi funksjonen toggle_ddl() . For å gjøre det, må vi sjekke verdien av datalist.style.display egenskapen . Hvis det er en tom streng, er datalisten skjult, så vi må sette verdien sin til å block , og også å endre knappen fra en pil ned til en pil som peker opp.
funksjon toggle_ddl () {/ * hvis DDL er skjult * / hvis (datalist.style.display === '') {/ * vis DDL * / datalist.style.display = 'block'; this.textContent = "à ¢ A-²"; } annet hide_select (); } funksjon hide_select () {/ * skjul DDL * / datalist.style.display = ''; button.textContent = "à ¢ A-¼"; } Funksjonen hide_select() skjuler datalisten ved å sette datalist.style.display egenskapen tilbake til en tom streng, og endre hide_select() tilbake for å peke nedover.
I det endelige oppsettet, hvis inntastingsfeltene har et tidligere valgt alternativ, og rullegardinlisten også har blitt utløst av et senere knappeklikk, må også previoulsy valgt alternativ vises som valgt i rullegardinlisten.
Så la oss legge til følgende markerte kode til funksjonen toggle_ddl() :
funksjon toggle_ddl () {/ * hvis DDL er skjult * / hvis (datalist.style.display === '') {/ * vis DDL * / datalist.style.display = 'block'; this.textContent = "à ¢ A-²"; var val = input.value; for (var i = 0; i Vi ønsker også å skjule rullegardinlisten når brukeren skriver inn i inntastingsfeltet (når arbeidsdatabasen vises).
/ * når brukeren vil skrive inn tekstfelt, skjul DDL * / input = document.querySelector ('input'); input.addEventListener ('fokus', hide_select); 5. Oppdater inndata når et alternativ er valgt Til slutt, la oss legge til en change til tag, slik at når brukeren velger et alternativ fra rullegardinlisten, vil verdien bli vist inni
/ * 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 koder varierer over forskjellige nettlesere).
I Firefox er også inntastingen tilpasset alternativer som inneholder inntastene, mens andre nettlesere samsvarer med alternativer som begynner med disse tegnene. W3C-spesifikasjonen for datalisten angir ikke eksplisitt hvordan samsvarende skal gjøres.
Annet enn det, er denne metoden god og fungerer i alle de store nettleserne , mens i nettlesere hvor det ikke fungerer, kan brukerne fortsatt se rullegardinlisten, bare forslagene vises ikke.
Sjekk ut den endelige demoen med litt CSS styling nedenfor:
Hvordan lage hjerteform med CSS
CSS3 løfter muligheten til det vi kan bygge på nettsteder ved hjelp av bare HTML og CSS. Du kan finne fantastiske eksempler som vi tidligere har omtalt. Men la oss ikke komme for langt foran oss selv, en komplisert design vil trenge koder som kan gi deg hodepine.I stedet skal vi lage noe enkelt for å hjelpe deg med å forstå former og posisjonering med CSS først, før du drar til mer avanserte design. Siden
(Tekniske og design tips)
Designere: 10 korte bøker for å drepe din ledig tid
Vanligvis bruker vi så mye tid på å sjekke våre statusoppdateringer for sosiale nettverk og spiller våre spill, så når det gjelder å reise lange avstander, er det kanskje tid for en endring. Snarere enn å falle tilbake på skrivebøker skjønt, hvorfor ikke ta tak i ebooks, slik at du kan bytte fra en tittel til den neste uten å bære all den ekstra vekten .Alt du trenge
(Tekniske og design tips)
no.hideout-lastation.com
2. Gjør Datalist Synlig 
Som nevnt, på grunn av den innebygde oppførselen til 
