Tag datalist

Tag datalist mencipta isian automatik untuk medan input input dalam borang HTML.

Intipati isian automatik: apabila pengguna cuba menaip sesuatu dalam medan input, di bawah akan muncul petunjuk timbul, yang merupakan senarai pilihan yang tersedia. Pengguna boleh memilih salah satu pilihan yang dicadangkan, tanpa memasukkan sepenuhnya.

Untuk mengaitkan isian automatik kepada tag input, ia perlu diberikan atribut list, di mana atribut id tag datalist yang dikaitkan perlu dinyatakan.

Pilihan pilihan disimpan dalam tag option, yang seterusnya disimpan dalam tag datalist.

Contoh

Mari kita masukkan negara dalam medan input. Mari masukkan huruf 'b' dahulu - dan kita akan melihat petunjuk timbul dari tiga negara. Kemudian masukkan huruf 'e' - bilangan negara yang dicadangkan akan berkurangan kepada dua:

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

Contoh

Sekarang mari kita tambah atribut value kepada tag option. Apabila memilih negara tertentu dalam input yang dikaitkan, bukan nama negara yang akan dimasukkan, tetapi kandungan atribut 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>

Contoh . Pengaruh atribut autocomplete

Senarai juntai bawah petunjuk dipengaruhi oleh atribut autocomplete. Jika ia dihidupkan (dan ini adalah lalai), maka kepada nilai yang anda tetapkan dalam tag datalist, akan dicampurkan nilai-nilai yang sebelum ini dimasukkan oleh pengguna dalam medan ini.

Masukkan 'Brazil' dalam medan dan tekan tbutang hantar (tanpa penghantaran pelayar tidak akan mengingati negara ini). Kemudian kembali kepada contoh ini dan masukkan huruf 'b' - dalam senarai yang muncul anda akan melihat bukan sahaja 3 negara dari datalist, tetapi juga negara yang dimasukkan sebelum ini (selain daripada itu, jika anda melakukan perkara yang sama dengan perkataan 'Belarus' - dalam senarai juntai bawah nilai ini akan muncul dua kali).

Jika ini mengganggu anda - matikan atribut autocomplete, dengan menambah nilai off kepadanya.

Lakukan manipulasi yang diterangkan di atas dengan contoh:

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

Lihat juga

atribut autocomplete,
yang menetapkan isian automatik kepada medan borang