Tag datalist

Tag datalist membuat autocomplete untuk bidang input input dalam formulir HTML.

Inti dari autocomplete: ketika pengguna mencoba mengetik sesuatu di bidang input, di bawahnya akan muncul petunjuk pop-up yang merupakan daftar pilihan yang tersedia. Pengguna dapat memilih salah satu opsi yang diusulkan tanpa harus mengetiknya hingga selesai.

Untuk mengikat autocomplete ke tag input, perlu diberikan atribut list, yang harus menentukan atribut id dari tag datalist yang diikat.

Pilihan opsi disimpan dalam tag option, yang pada gilirannya disimpan dalam tag datalist.

Contoh

Mari kita masukkan nama negara di bidang input. Ketikkan huruf 'b' terlebih dahulu - dan kita akan melihat petunjuk pop-up dengan tiga negara. Kemudian ketik tambahan huruf 'e' - jumlah negara yang diusulkan akan berkurang menjadi dua:

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

Contoh

Sekarang mari tambahkan atribut value ke tag option. Saat memilih negara tertentu, yang akan muncul di input yang terikat bukanlah nama negara, melainkan isi dari 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

Daftar petunjuk yang muncul-dropdown dipengaruhi oleh atribut autocomplete. Jika diaktifkan (dan ini adalah default), maka ke nilai-nilai yang Anda tetapkan dalam tag datalist, akan tercampur nilai-nilai yang sebelumnya dimasukkan pengguna ke bidang ini.

Ketik 'Brazil' di bidang tersebut dan tekan tombol kirim (tanpa pengiriman, browser tidak akan mengingat negara ini). Kemudian kembali ke contoh ini dan masukkan huruf 'b' - dalam daftar yang muncul Anda akan melihat tidak hanya 3 negara dari datalist, tetapi juga negara yang sebelumnya diketik (selain itu, jika Anda melakukan hal yang sama dengan kata 'Belarus' - dalam daftar dropdown nilai ini akan muncul dua kali).

Jika ini mengganggu Anda - nonaktifkan atribut autocomplete, dengan menambahkan nilai off padanya.

Lakukan manipulasi yang dijelaskan di atas pada 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 mengatur autocomplete untuk bidang formulir