Етикет datalist

Етикетът datalist създава автодопълване за полета за въвеждане input в HTML форма.

Същността на автодопълването: когато потребителят се опитва да напише нещо в полето за въвеждане, отдолу ще се появява изскачащ подсказка, която ще представлява списък с налични варианти за избор. Потребителят ще може да избере един от предложените варианти, без да въвежда напълно.

За да се свърже към етикета input автодопълване, на него трябва да се зададе атрибут list, в който трябва да се посочи атрибута id на свързания етикет datalist.

Вариантите за избор се съхраняват в етикети option, които от своя страна се съхраняват в етикета datalist.

Пример

Нека в полето за въвеждане въведем държава. Въвеждаме първо буквата 'b' - и виждаме изскачаща подсказка от три държави. След това въвеждаме още и буквата 'e' - броят на предложените държави ще намалее до две:

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

Пример

Нека сега към етикета option добавим атрибута value. При избор на определена държава в свързаното поле ще попадне не името на държавата, а съдържанието на атрибута 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>

Пример . Влияние на атрибута autocomplete

На падащия списък с подсказки оказва влияние атрибута autocomplete. Ако е включен (както е по подразбиране), тогава към стойностите, които сте задали в етикета datalist, ще се примесват тези стойности, които потребителят е въвеждал в това поле преди.

Въведете в полето 'Brazil' и натиснете бутона за изпращане (без изпращане браузърът няма да запомни тази държава). След това се върнете към този пример и въведете буквата 'b' - в появилия се списък ще видите не само 3 държави от datalist, но и въведената преди това държава (освен това, ако направите същото с думата 'Belarus' - в падащия списък тази стойност ще се появи два пъти).

Ако това ви пречи - изключете атрибута autocomplete, като му добавите стойност off.

Направете описаните по-горе манипулации с примера:

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

Вижте също

атрибута autocomplete,
който задава автодопълване на полетата на формата