Таг 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. При избору одређене државе у везано input поље ће ући не назив државе, већ садржај атрибута 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,
који задаје аутоматско попуњавање пољима форме