HTML Academy · Pelajaran

Datalist untuk Pelengkapan Otomatis

Sarankan nilai input dengan elemen datalist.

Datalist untuk Pelengkapan Otomatis adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Apa Itu datalist?

Elemen <datalist> menyediakan daftar saran yang telah ditentukan untuk sebuah <input>:

<label for="browser">Favorite browser</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>
<!-- list attribute links input to datalist by id -->
<!-- User can type freely OR select a suggestion -->

datalist dibandingkan dengan select

Perbedaan utama antara <datalist> dan <select>:

datalist — teks bebas + saran (pengguna dapat mengetik apa saja)
select — pilihan terbatas (pengguna harus memilih dari daftar)

Gunakan datalist jika Anda ingin menyarankan nilai tanpa membatasi masukan.

Menghubungkan datalist dengan masukan

Atribut list pada <input> harus sama dengan id dari <datalist>:

<input type="text" list="fruits" name="fruit">
<datalist id="fruits">
  <option value="Apple">
  <option value="Banana">
  <option value="Cherry">
</datalist>

datalist dengan Jenis Masukan yang Berbeda

<datalist> berfungsi dengan banyak jenis masukan:

<!-- text + datalist: type-ahead suggestions -->
<input type="text" list="countries">

<!-- range + datalist: tick marks -->
<input type="range" min="0" max="100" step="10" list="marks">
<datalist id="marks">
  <option value="0">  <option value="25">
  <option value="50"> <option value="75"> <option value="100">
</datalist>

<!-- color + datalist: color palette shortcuts -->
<input type="color" list="brand-colors">
<datalist id="brand-colors">
  <option value="#0070f3">
  <option value="#e86f00">
</datalist>

label option dalam datalist

Opsi dalam datalist dapat memiliki label yang terlihat dan nilai yang dikirimkan:

<datalist id="countries">
  <option value="US">United States</option>
  <option value="GB">United Kingdom</option>
  <option value="DE">Germany</option>
</datalist>
<!-- In some browsers, label shows in dropdown
     value is submitted when the option is selected -->

Menyaring Saran

Peramban menyaring saran saat pengguna mengetik:

Algoritme pencocokan berbeda-beda menurut peramban
Sebagian mencocokkan dari awal; lainnya mencocokkan di mana saja dalam string
Anda tidak dapat mengendalikan perilaku penyaringan peramban
Untuk penyaringan kustom, buat komponen pelengkapan otomatis kustom dengan ARIA

datalist Dinamis dengan JavaScript

Perbarui opsi datalist secara dinamis:

<input type="text" list="suggestions" id="search-input">
<datalist id="suggestions"></datalist>

<script>
document.getElementById('search-input').addEventListener('input', async function() {
  const query = this.value;
  const res = await fetch(`/api/search?q=${query}`);
  const items = await res.json();

  const dl = document.getElementById('suggestions');
  dl.innerHTML = items.map(item =>
    `<option value="${item.name}">`
  ).join('');
});
</script>

Aksesibilitas datalist

Pertimbangan aksesibilitas untuk datalist:

Pembaca layar mengumumkan saran sebagai listbox
Pengguna dapat menavigasi saran dengan tombol panah
Masukan tetap menerima teks bebas — pastikan validasi menangani hal ini

Catatan Dukungan Peramban

Dukungan peramban untuk datalist sudah baik, tetapi memiliki beberapa keunikan:

Chrome, Edge, Firefox: dukungan penuh
Safari: didukung mulai Safari 12.1+
Peramban seluler: sebagian besar menampilkan saran, tetapi tampilannya berbeda-beda
Selalu uji pada peramban target sebelum mengandalkan datalist

Kapan Tidak Menggunakan datalist

Datalist tidak ideal jika:

Anda memerlukan validasi ketat (pengguna harus memilih dari daftar)
Anda memerlukan penataan opsi kustom (peramban mengendalikan seluruh tampilannya)
Anda memerlukan pengelompokan (optgroup tidak didukung dalam datalist)

Dalam kasus tersebut, gunakan komponen pelengkapan otomatis kustom dengan ARIA role="combobox".

datalist dibandingkan dengan masukan pencarian

Bandingkan datalist dengan masukan pencarian yang memiliki pelengkapan otomatis:

<input type="search" name="q" list="search-suggestions">
<datalist id="search-suggestions">
  <option value="HTML tutorial">
  <option value="HTML forms">
  <option value="HTML accessibility">
</datalist>
<!-- type="search" provides search-specific UI on mobile -->
<!-- list attribute adds datalist suggestions to any input type -->

Pemeriksaan Cepat

Bagaimana cara menghubungkan masukan dengan elemen datalist-nya?

Ringkasan: datalist

Hal-hal penting tentang datalist:

<datalist id> + <input list> — ditautkan melalui id/list yang sama
Pengguna dapat mengetik dengan bebas atau memilih saran
Gunakan <select> jika pilihan harus dibatasi
Berfungsi dengan jenis masukan teks, rentang, warna, dan lainnya
Saran disaring saat pengguna mengetik

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Datalist untuk Pelengkapan Otomatis” gratis?

Ya — teks lengkap “Datalist untuk Pelengkapan Otomatis” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Datalist untuk Pelengkapan Otomatis”?

Sarankan nilai input dengan elemen datalist. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Datalist untuk Pelengkapan Otomatis” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke HTML Academy