Datalist-taggen

Tagget datalist skaber autofyldning til inputfelter input i en HTML formular.

Essensen af autofyldning: når brugeren begynder at skrive noget i inputfeltet, vil der dukke en pop op-opfordring op nedenunder, som vil repræsentere en liste over tilgængelige valgmuligheder. Brugeren vil være i stand til at vælge en af de foreslåede muligheder uden at skulle skrive den fuldt ud.

For at knytte autofyldning til et input-tag, skal det tildeles et list-attribut, hvor man skal angive id-attributten på det tilknyttede datalist-tag.

Valgmulighederne opbevares i option-tags, som igen er placeret i datalist-tagget.

Eksempel

Lad os indtaste et land i inputfeltet. Lad os først skrive bogstavet 'b' - og vi vil se en pop op-opfordring med tre lande. Derefter skriver vi også bogstavet 'e' - antallet af foreslåede lande vil blive reduceret til to:

<input type="text" list="country">
<datalist id="country">
	<option>Belarus</option>
	<option>Belgium</option>
	<option>Bulgaria</option>
</datalist>

Eksempel

Lad os nu tilføje attributten value til option-tagget. Ved valg af et bestemt land vil det ikke være landets navn, der går ind i det tilknyttede inputfelt, men indholdet af value-attributten:

<input type="text" list="country-value">
<datalist id="country-value">
	<option value="Belarus">Belarus - a country of lakes and potatoes</option>
	<option value="Belgium">Belgium - a country where Belgians live</option>
	<option value="Bulgaria">Bulgaria - a country for vacation</option>
</datalist>

Eksempel . Indflydelse af autocomplete-attributten

Dropdown-listen med forslag påvirkes af autocomplete-attributten. Hvis den er slået til (hvilket den er som standard), vil de værdier, du har angivet i datalist-tagget, blive blandet med de værdier, som brugeren tidligere har indtastet i dette felt.

Skriv 'Brazil' i feltet og tryk på afsend-knappen (uden afsendelse vil browseren ikke huske dette land). Vend derefter tilbage til dette eksempel og indtast bogstavet 'b' - i den fremkomne liste vil du se ikke kun 3 lande fra datalist, men også det tidligere indtastede land (bortset fra det, hvis du gør det samme med ordet 'Belarus' - vil denne værdi optræde to gange i dropdown-listen).

Hvis dette forstyrrer dig - deaktiver autocomplete-attributten ved at tildele den værdien off.

Udfør de beskrevne manipulationer med eksemplet:

<form action="">
	<input type="text" list="country" autocomplete="on">
	<datalist id="country">
		<option>Belarus</option>
		<option>Belgium</option>
		<option>Bulgaria</option>
		<input type="submit">
	</datalist>
</form>

Se også

attributten autocomplete,
som angiver autofyldning til formularfelter