Taggen datalist

Taggen datalist skapar autofyllning för inmatningsfält input i HTML formulär.

Kärnan i autofyllning: när användaren försöker skriva något i inmatningsfältet kommer en popup-hint att dyka upp underifrån, som kommer att representera en lista med tillgängliga valalternativ. Användaren kan välja ett av de föreslagna alternativen utan att behöva skriva det helt och hållet.

För att koppla autofyllning till taggen input måste den tilldelas attributet list, där attributet id för den tillkopplade taggen datalist ska anges.

Valalternativen lagras i taggarna option, som i sin tur lagras i taggen datalist.

Exempel

Låt oss ange ett land i inmatningsfältet. Vi skriver först bokstaven 'b' - och ser en popup- hint med tre länder. Sedan skriver vi ytterligare bokstaven 'e' - antalet föreslagna länder minskar till två:

:

Exempel

Låt oss nu lägga till attributet value till taggen option. När ett visst land väljs kommer det inte att vara landets namn som hamnar i den kopplade inputen, utan innehållet i attributet value:

:

Exempel . Inverkan av attributet autocomplete

Dropdown-listan med hints påverkas av attributet autocomplete. Om den är aktiverad (vilket den är som standard), kommer de värden du angett i taggen datalist att blandas med de värden som användaren tidigare har angett i detta fält.

Skriv 'Brazil' i fältet och tryck på skicka-knappen (utan att skicka kommer webbläsaren inte att komma ihåg detta land). Återvänd sedan till detta exempel och skriv bokstaven 'b' - i listan som dyker upp ser du inte bara 3 länder från datalist, utan också det tidigare inmatade landet (förutom det, om du gör samma sak med ordet 'Belarus' - i dropdown-listan kommer detta värde att finnas med två gånger).

Om detta stör dig - inaktivera attributet autocomplete, genom att ge det värdet off.

Utför manipulationerna som beskrivs ovan med exemplet:

:

Se även