Silt datalist

Silt datalist loob automaattäitmise sisestusväljadele input HTML vormis.

Automaattäitmise olemus: kui kasutaja üritab sisestusväljale midagi sisestada, kuvatakse allpool hüpikakna abil soovituste loendit. Kasutaja saab valida ühe pakutud valikutest, ilma et peaks selle lõpuni välja kirjutama.

Et siduda silti input automaattäitmisega, tuleb sellele määrata atribuut list, kus tuleb määrata seotud sildi datalist atribuut id.

Valikuvariandid hoitakse siltides option, mis omakorda hoitakse sildis datalist.

Näide

Sisestame sisestusväljale riigi. Sisestame kõigepealt tähe 'b' - ja näeme hüpikaknas soovitust kolmest riigist. Seejärel sisestame tähe 'e' - pakutud riikide arv väheneb kahele:

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

Näide

Lisame nüüd sildile option atribuudi value. Kui valitakse kindel riik, siis seotud sisestusväljale kantakse mitte riigi nimi, vaid atribuudi value sisu:

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

Näide . Atribuudi autocomplete mõju

Soovituste rippmenüüle avaldab mõju atribuut autocomplete. Kui see on sisse lülitatud (vaikimisi on nii), siis teie sildis datalist määratud väärtustele lisanduvad väärtused, mida kasutaja on varem selles väljas sisestanud.

Sisestage väljale 'Brazil' ja vajutage saatmise nuppu (ilma saatmiseta brauser seda riiki ei mäleta). Seejärel naaske selle näite juurde ja sisestage täht 'b' - tekkivas loendis näete mitte ainult 3 riiki sildist datalist, vaid ka varem sisestatud riiki (peale selle, kui teete sama sõnaga 'Belarus' - rippmenüüs on see väärtus kaks korda).

Kui see teile segab, keelake atribuut autocomplete, andes sellele väärtuse off.

Tehke kirjeldatud manipulatsioonid näitega:

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

Vaata ka

atribuut autocomplete,
mis määrab vormiväljadele automaattäitmise