Datalist tag

Tag datalist kreira autocomplete za polja za unos input u HTML formi.

Suština autocomplete-a: kada korisnik pokušava da ukuca nešto u polje za unos, ispod će se pojaviti iskačući prompt koji će predstavljati listu dostupnih opcija za izbor. Korisnik će moći da izabere jednu od ponuđenih opcija, bez potrebe da je u potpunosti unese.

Da bi se tagu input pridružio autocomplete, potrebno mu je dodeliti atribut list, u kojem treba navesti atribut id povezanog taga datalist.

Opcije za izbor se čuvaju u tagovima option, koji se pak nalaze unutar taga datalist.

Primer

Hajde da u polje za unos unesemo državu. Unesimo prvo slovo 'b' - i videćemo iskačući prompt od tri države. Zatim unesimo još i slovo 'e' - broj ponuđenih država će se smanjiti na dve:

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

Primer

Hajde sada tagu option da dodamo atribut value. Prilikom izbora određene države u povezano input polje će otići ne naziv države, već sadržaj 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 . Uticaj atributa autocomplete

Na padajuću listu promptova utiče atribut autocomplete. Ako je uključen (a tako će biti podrazumevano), tada će se vrednostima koje ste postavili u tagu datalist mešati one vrednosti koje je korisnik ranije uneo u ovo polje.

Ukucajte u polje 'Brazil' i pritisnite dugme za slanje (bez slanja brauzer neće zapamtiti ovu državu). Zatim se vratite na ovaj primer i unesite slovo 'b' - u pojavnoj listi videćete ne samo 3 države iz datalist, već i ranije unetu državu (pored toga, ako uradite isto sa rečju 'Belarus' - u padajućoj listi će se ta vrednost pojaviti dva puta).

Ako vam to smeta - isključite atribut autocomplete, dodavši mu vrednost off.

Uradite gore opisane manipulacije sa 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>

Pogledajte takođe

atribut autocomplete,
koji dodeljuje autocomplete poljima forme