Znacznik datalist

Znacznik datalist tworzy autouzupełnianie dla pól wprowadzania input w formularzu HTML.

Istota autouzupełniania: gdy użytkownik będzie próbował coś wpisać w pole wprowadzania, poniżej pojawi się wyskakująca podpowiedź, która będzie przedstawiać listę dostępnych wariantów wyboru. Użytkownik będzie mógł wybrać jeden z proponowanych wariantów, nie wprowadzając go do końca.

Aby powiązać ze znacznikiem input autouzupełnianie, należy mu nadać atrybut list, w którym należy wskazać atrybut id powiązywanego znacznika datalist.

Warianty wyboru przechowywane są w znacznikach option, które z kolei przechowywane są w znaczniku datalist.

Przykład

Wprowadźmy w pole wprowadzania kraj. Wprowadźmy na początku literę 'b' - i zobaczymy wyskakującą podpowiedź z trzech krajów. Następnie wprowadźmy jeszcze i literę 'e' - liczba proponowanych krajów zmniejszy się do dwóch:

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

Przykład

Dodajmy teraz do znacznika option atrybut value. Przy wyborze określonego kraju do powiązanego inputu trafi nie nazwa kraju, a zawartość atrybutu 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>

Przykład . Wpływ atrybutu autocomplete

Na rozwijaną listę podpowiedzi wpływa atrybut autocomplete. Jeśli jest włączony (a tak będzie domyślnie), to do wartości, które ustawiłeś w znaczniku datalist, będą domieszać się te wartości, które użytkownik wprowadzał w to pole wcześniej.

Wpisz w pole 'Brazil' i naciśnij przycisk wysłania (bez wysłania przeglądarka nie zapamięta tego kraju). Następnie wróć do tego przykładu i wprowadź literę 'b' - w pojawiającej się liście zobaczysz nie tylko 3 kraje z datalist, ale i wpisany wcześniej kraj (oprócz tego, jeśli zrobisz to samo ze słowem 'Belarus' - w rozwijanej liście ta wartość będzie dwa razy).

Jeśli ci to przeszkadza - wyłącz atrybut autocomplete, dodając mu wartość off.

Wykonaj opisane powyżej manipulacje z przykładem:

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

Zobacz też

atrybut autocomplete,
który ustawia autouzupełnianie polom formularza