Share
HTML5 introducerade ett antal nya element, bland annat några intressanta formulär kontroller. En sådan användbar, men ändå liten känd kontroll är datalistiska elementet. Låt oss se vad det kan göra för oss.
Tänk dig att vi har ett formulär och vi vill att en användare ska skriva in en sträng text, till exempel deras namn. Vi har element som tillåter användaren att skriva vad han eller hon vill ha. Tänk då att vi vill att användaren ska komma in i sitt hemland vi skulle troligen använda a element. Detta skulle begränsa resultaten till de tillgängliga alternativen (ibland en bra sak) och skulle också presentera användaren med en potentiell enorm lista att välja mellan.
Men vad händer om vi vill att användaren ska vara fri att ange vad de vill, samtidigt som man får några förslag? Det är här Datalist kommer in.
De Datalist innehåller alternativ element som mycket som Välj element, dock Datalist själv är inte en självständig kontroll. Istället läggs det till eller bifogas en element med hjälp av lista attribut. Tänk på följande markering:
Vi har regelbundet kontroll med en id och den nya lista attribut. Detta berättar att webbläsaren laddar listan över värden eller förslag från Datalist element med motsvarande ID.
Då kommer den verkliga Datalist element med ovan nämnda id och en samling av alternativ element. Så här är värdena kopplade till inmatning kontrollera.
När vi kör det här i webbläsaren ser vi en normal textruta, då när vi börjar skriva (eller tryck på nedåtpilen, som fungerar i Firefox och Chrome men inte i Opera) visas den fullständiga eller filtrerade listan. När vi skriver kommer bara de relevanta alternativen att visas, ungefär som hur Googles sökrutan visar förslag. Var dock medveten om att det finns lilla beteendevariationer från webbläsare till webbläsare.
Enligt den officiella W3C-webbplatsen, den Datalist kan användas med:
Accentsconagua
Vi kan ta alternativen ett steg längre genom addind a märka attribut, som i några av följande punkter:
Exakt hur dessa etiketter visas och hanteras beror på webbläsaren - ta en titt på frågar sektionen nedre ned för att se hur.
Webbläsaren stöder för Datalist förblev smala tills nyligen. Nu stöder IE 10+, Firefox 4+, Chrome och Opera det (ingen Safari än). Den stöds också av Opera Mobile och Firefox för Android. Ta en titt på denna skärmdump som visar aktuell status som listad av caniuse.com:
Äldre webbläsare ignorerar automatiskt datalistelementet.
Det övergripande stödet som nämns är 48,36% procent. Förmodligen inte så bra, men den positiva nyheten är att äldre webbläsare automatiskt ignorerar datalistelementet, vilket ger oss en graciöst nedslående upplevelse. Detta gäller i själva verket för alla nya HTML5-formelementen. Om stöd för äldre webbläsare krävs kan jQuery Autocomplete användas som en återgång.
Eftersom bredare webbläsarsupport endast är nyligen, finns det förutsägbara tolkningar från leverantörerna. Firefox och Chrome använder OS-temat för styling av listalternativen, medan Opera kommer att ärva vissa stilar (färg, font-familj) från inmatning fält. Annars än, glöm det att stylera datalistelementet med CSS.
Beteendet varierar också med hur värdena filtreras. Varje webbläsare hanterar listan annorlunda när märka och värde attribut av alternativ element används.
Opera kommer till exempel att filtrera på grundval av både värde och etikett. "av A" och "Brac" kommer båda tillbaka "Brackets" i vårt fall.
Chrome kommer emellertid att ignorera etiketten. "av A" kommer inte att returnera några resultat, till exempel medan "Brac" kommer.
Firefox visar endast etiketten om den är definierad. "av A" kommer att returnera "av Adobe", men "Brackets" finns inte längre alls!
Det finns gott om utrymme för förbättringar när det gäller genomförandet, men totalt sett är detta ett välkommet tillskott till webens värld. Jag hoppas att detta har gett din aptit!
