Oznaka datalist

Oznaka datalist ustvarja samodejno dopolnjevanje za vnosna polja input v HTML obrazcu.

Bistvo samodejnega dopolnjevanja: ko bo uporabnik poskušal vnesti kaj v vnosno polje, se bo spodaj prikazalo pojavno okno z namigi, ki bo predstavljalo seznam razpoložljivih možnosti izbire. Uporabnik bo lahko izbral eno od predlaganih možnosti, ne da bi jo vnesel do konca.

Da povežete oznako input s samodejnim dopolnjevanjem, ji morate določiti atribut list, kjer je treba navesti atribut id povezane oznake datalist.

Možnosti izbire so shranjene v oznakah option, ki so same shranjene v oznaki datalist.

Primer

Vnesimo državo v vnosno polje. Vnesimo sprva črko 'b' - in opazimo pojavni namig s tremi državami. Nato vnesemo še črko 'e' - število predlaganih držav se bo zmanjšalo na dve:

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

Primer

Dodajmo zdaj oznaki option atribut value. Ko izberemo določeno državo, se v povezano polje input ne bo shranilo ime države, ampak vsebina atributa value:

<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>

Primer . Vpliv atributa autocomplete

Na spustni seznam namigov vpliva atribut autocomplete. Če je vklopljen (in privzeto je), se bodo k vrednostim, ki ste jih nastavili v oznaki datalist, primešane tiste vrednosti, ki jih je uporabnik prej vnesel v to polje.

Vnesite v polje 'Brazil' in pritisnite gumb za pošiljanje (brez pošiljanja brskalnik te države ne bo zapomnil). Nato se vrnite k temu primeru in vnesite črko 'b' - v prikazanem seznamu boste videli ne le 3 države iz datalist, ampak tudi prej vneseno državo (poleg tega, če naredite enako z besedo 'Belarus' - v spustnem seznamu bo ta vrednost prikazana dvakrat).

Če vam to moti - onemogočite atribut autocomplete, tako da mu dodelite vrednost off.

Ponovite zgoraj opisane manipulacije s primerom:

<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>

Glejte tudi

atribut autocomplete,
ki določa samodejno dopolnjevanje poljem obrazca