Tag-ul datalist

Tag-ul datalist creează completare automată pentru câmpurile de introducere input în formularul HTML.

Esența completării automate: când utilizatorul va încerca să tasteze ceva în câmpul de introducere, dedesubt va apărea un indiciu contextual, care va reprezenta o listă de opțiuni disponibile. Utilizatorul va putea alege una dintre opțiunile propuse, fără a introduce o completare până la capăt.

Pentru a lega de tag-ul input completarea automată, acestuia trebuie să i se atribuie atributul list, în care trebuie indicat atributul id tag-ului datalist asociat.

Opțiunile de alegere sunt stocate în tag-urile option, care la rândul lor sunt stocate în tag-ul datalist.

Exemplu

Să introducem în câmpul de introducere o țară. Să introducem la început litera 'b' - și vom vedea un indiciu contextual cu trei țări. Apoi să introducem încă și litera 'e' - numărul țărilor propuse se va reduce la două:

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

Exemplu

Acum să adăugăm la tag-ul option atributul value. La alegerea unei anumite țări în input-ul asociat va ajunge nu denumirea țării, ci conținutul atributului 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>

Exemplu . Influența atributului autocomplete

Asupra listei derulante de indicii are influență atributul autocomplete. Dacă este activat (și așa va fi implicit), atunci la valorile pe care le-ați setat în tag-ul datalist, se vor adăuga acele valori, pe care utilizatorul le-a introdus anterior în acest câmp.

Introduceți în câmp 'Brazil' și apăsați butonul de trimitere (fără trimitere browserul nu va memora această țară). Apoi reveniți la acest exemplu și introduceți litera 'b' - în lista apărută veți vedea nu doar 3 țări din datalist, ci și țara introdusă anterior (pe lângă asta, dacă faceți același lucru cu cuvântul 'Belarus' - în lista derulantă această valoare va apărea de două ori).

Dacă acest lucru vă deranjează - dezactivați atributul autocomplete, adăugându-i valoarea off.

Efectuați manipulările descrise mai sus cu exemplul:

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

Vezi și

atributul autocomplete,
care atribuie completarea automată câmpurilor formularului