Prvok datalist

Prvok datalist vytvára automatické dopĺňanie pre vstupné polia input v HTML formulári.

Podstata automatického dopĺňania: keď sa používateľ pokúsi niečo zadať do vstupného poľa, zospodu sa objaví vyskakovacia nápoveda, ktorá predstavuje zoznam dostupných možností výberu. Používateľ si môže vybrať jednu z ponúknutých možností, bez potreby ho dopísať do konca.

Ak chcete prepojiť prvok input s automatickým dopĺňaním, je potrebné mu nastaviť atribút list, v ktorom by mal byť uvedený atribút id prepojovaného prvku datalist.

Možnosti výberu sú uložené v prvkoch option, ktoré sú následne uložené v prvku datalist.

Príklad

Zadajme do vstupného poľa krajinu. Najprv zadajme písmeno 'b' - a uvidíme vyskakovaciu nápovedu z troch krajín. Potom zadajme ďalšie písmeno 'e' - počet ponúknutých krajín sa zníži na dve:

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

Príklad

Pridajme teraz k prvku option atribút value. Pri výbere konkrétnej krajiny sa do prepojeného poľa input dostane nie názov krajiny, ale obsah atribútu 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>

Príklad . Vplyv atribútu autocomplete

Na rozbaľovací zoznam nápovied má vplyv atribút autocomplete. Ak je zapnutý (čo je predvolené nastavenie), potom k hodnotám, ktoré ste zadali v prvku datalist, sa pridajú tie hodnoty, ktoré používateľ do tohto poľa predtým zadal.

Zadajte do poľa 'Brazil' a stlačte tlačidlo odoslania (bez odoslania prehliadač túto krajinu nezapamätá). Potom sa vráťte k tomuto príkladu a zadajte písmeno 'b' - v zobrazenom zozname uvidíte nielen 3 krajiny z datalist, ale aj predtým zadanú krajinu (okrem toho, ak urobíte to isté so slovom 'Belarus' - v rozbaľovacom zozname bude táto hodnota dvakrát).

Ak vám to prekáža - vypnite atribút autocomplete, pridaním hodnoty off.

Vykonajte opísané manipulácie s príkladom:

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

Pozri tiež

atribút autocomplete,
ktorý nastavuje automatické dopĺňanie poliam formulára