Prvek datalist

Prvek datalist vytváří automatické doplňování pro vstupní pole input v HTML formuláři.

Podstata automatického doplňování: když se uživatel pokusí něco napsat do vstupního pole, zobrazí se pod ním vyskakovací nápověda, která představuje seznam dostupných možností výběru. Uživatel může vybrat jednu z nabízených možností, aniž by ji musel dopsat celou.

Chcete-li k prvku input připojit automatické doplňování, je nutné mu nastavit atribut list, ve kterém je třeba uvést atribut id připojovaného prvku datalist.

Možnosti výběru jsou uloženy v prvcích option, které jsou následně uloženy v prvku datalist.

Příklad

Zadejme do vstupního pole zemi. Nejprve zadejme písmeno 'b' - a uvidíme vyskakovací nápovědu se třemi zeměmi. Poté zadáme ještě písmeno 'e' - počet nabízených zemí se sníží na dvě:

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

Příklad

Nyní přidejme k prvku option atribut value. Při výběru konkrétní země se do připojeného vstupního pole dostane nikoli název země, ale obsah atributu 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>

Příklad . Vliv atributu autocomplete

Na rozbalovací seznam nápověd má vliv atribut autocomplete. Pokud je zapnutý (a to bude ve výchozím nastavení), pak se k hodnotám, které jste nastavili v prvku datalist, přimíchají ty hodnoty, které uživatel do tohoto pole dříve zadal.

Zadejte do pole 'Brazil' a stiskněte tlačítko pro odeslání (bez odeslání si prohlížeč tuto zemi nezapamatuje). Poté se vraťte k tomuto příkladu a zadejte písmeno 'b' - v zobrazeném seznamu uvidíte nejen 3 země z datalist, ale také dříve zadanou zemi (kromě toho, pokud provedete totéž se slovem 'Belarus' - v rozbalovacím seznamu bude tato hodnota dvakrát).

Pokud vám to vadí - vypněte atribut autocomplete, a to přidáním hodnoty off.

Proveďte výše popsané manipulace s příkladem:

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

Viz také

atribut autocomplete,
který nastavuje automatické doplňování polí formuláře