Belajar Element HTML: <datalist>

Tag <datalist> menentukan daftar opsi yang telah ditentukan untuk elemen <input>.

Tag ini bisa digunakan untuk membuat fitur “autocomplete” pada elemen form dengan cara memberi daftar opsi yang kemudian akan muncul saat pengguna memasukkan data.

Misalnya, jika pengguna mulai memasukkan teks ke kolom input, daftar opsi dengan value yang relevan akan ditampilkan sehingga pengguna bisa langsung memilihnya.

Syntax

Tag <datalist> ditulis seperti <datalist id=""></datalist> dengan beberapa jumlah tag <option> diletakkan diantara tag pembuka dan penutup.

<label>Negara Amerika Selatan</label><br>
<input list="negara" placeholder="Ketik Negara">
<datalist id="negara">
  <option value="Argentina">
  <option value="Bolivia">
  <option value="Brazil">
  <option value="Chile">
  <option value="Colombia">
  <option value="Ecuador">
  <option value="Guyana">
  <option value="Paraguay">
  <option value="Peru">
  <option value="Suriname">
  <option value="Uruguay">
  <option value="Venezuela">
</datalist>

Pengaturan Default CSS

Sebagian besar browser menampilkan elemen <datalist> dengan pengaturan CSS:

datalist {
  display: none;
}