Share
HTML5 introduserte en rekke nye elementer, blant annet noen interessante former kontrollerer. En slik nyttig, men lite kjent kontroll er datalistiske elementet. La oss se hva det kan gjøre for oss.
Tenk deg at vi har et skjema, og vi vil at en bruker skal skrive inn en streng med tekst, som for eksempel deres navn. Vi har element, som lar brukeren skrive hva han eller hun ønsker. Tenk deg da at vi vil at brukeren skal komme inn i sitt bostedsland; vi vil sannsynligvis bruke a element. Dette vil begrense resultatene til tilgjengelige alternativer (noen ganger en god ting) og vil også presentere brukeren med en potensiell enorm liste å velge mellom.
Men hva hvis vi vil at brukeren skal være fri til å legge inn det de ønsker, samtidig som det blir gitt noen forslag? Dette er hvor Datalist kommer inn.
De Datalist inneholder alternativ elementer som ligner på å velge element, skjønt Datalist i seg selv er ikke en selvstendig kontroll. I stedet er det lagt til eller knyttet til en element ved hjelp av liste Egenskap. Vurder følgende markering:
Vi har en vanlig kontroll med en id og den nye liste Egenskap. Dette forteller nettleseren å laste listen over verdier eller forslag fra Datalist element med tilhørende ID.
Så kommer den faktiske Datalist element med det nevnte id og en samling av alternativ elementer. Slik er verdiene knyttet til inngang styre.
Når vi kjører dette i nettleseren, ser vi en vanlig tekstboks, og når vi begynner å skrive (eller trykk på pil ned-tasten, som fungerer i Firefox og Chrome, men ikke i Opera), vises den komplette eller filtrerte listen. Når vi skriver, vises bare de relevante alternativene, omtrent som hvordan Googles søkeboks viser forslag. Vær oppmerksom på at det finnes små adferdsvariasjoner fra nettleseren til nettleseren.
Ifølge den offisielle W3C nettsiden, den Datalist kan brukes med:
Accentsconagua
Vi kan ta alternativene ett skritt videre ved addin a merkelapp attributt, som i noen av elementene nedenfor:
Nøyaktig hvordan disse etikettene vises og håndteres avhenger av nettleseren - ta en titt på Quirks delen nedre ned for å se hvordan.
Nettleseren støtter for Datalist forblev smal til nylig. Nå støtter IE 10+, Firefox 4+, Chrome og Opera den (ingen Safari ennå). Den støttes også av Opera Mobile og Firefox for Android. Ta en titt på dette skjermbildet som viser gjeldende status som oppført av caniuse.com:
Eldre nettlesere ignorerer automatisk datalistelementet.
Den samlede støtten nevnt er 48,36% prosentandel. Kanskje ikke så bra, men den positive nyheten er at eldre nettlesere automatisk vil ignorere datalistiske elementet, noe som gir oss en grasiøst nedverdigende opplevelse. Dette er faktisk sant for alle de nye HTML5-formelementene. Hvis det kreves støtte for eldre nettlesere, kan jQuery Autocomplete brukes som tilbakebetaling.
Siden bredere nettleserstøtte er bare nylig, er det forutsigbare tolkninger av leverandørene. Firefox og Chrome bruker OS-temaet for styling av listevalgene, mens Opera vil arve bestemte stilarter (farge, font-familie) fra inngang felt. Annet enn det, glem styling datalistiske elementet med CSS.
Bevegelsen varierer også med hvordan verdiene filtreres. Hver nettleser håndterer listen annerledes når merkelapp og verdi attributter av alternativ element er brukt.
Opera vil for eksempel filtrere på grunnlag av både verdi og etikett. "av A" og "Brac" vil begge returnere "Brackets" i vårt tilfelle.
Chrome vil imidlertid ignorere etiketten. "av A" vil ikke returnere noen resultater, for eksempel, mens "Brac" vil.
Firefox viser bare etiketten hvis den er definert. "av A" kommer tilbake "av Adobe", men "Brackets" eksisterer ikke lenger i det hele tatt!
Det er god plass for forbedring der implementeringen er opptatt, men generelt er dette et godt tillegg til webens verden. Jeg håper dette har gjort din appetitt!
