Тег datalist

Тегот datalist создава автоматско пополнување за полињата за внесување input во HTML форма.

Суштината на автоматското пополнување: кога корисникот ќе се обиде да внесе нешто во полето за внесување, одоздола ќе се појавува tooltip-потсетник, кој ќе претставува листа на достапни опции за избор. Корисникот ќе може да избере една од понудените опции, без да ја внесува целосно.

За да се поврзе со тегот input автоматското пополнување, на него мора да му се зададе атрибутот list, во кој треба да се наведе атрибутот id на поврзаниот тег datalist.

Опциите за избор се чуваат во теговите option, кои пак се чуваат во тегот datalist.

Пример

Ајде во полето за внесување да внесеме земја. Да внесеме прво буквата 'b' - и ќе видиме tooltip од три земји. Потоа да внесеме уште и буквата '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. Ако е вклучен (а така ќе биде по default), тогаш на вредностите што ги зададовте во тегот 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,
кој задава автоматско пополнување на полињата на формата