Pernah ngetik di Google search dan muncul saran-saran otomatis di bawah search box? Kamu bisa pilih saran (cepet) atau ketik bebas (kalo gak ada yang cocok). Tag <datalist> ngasih kamu UX yang sama di form sendiri — input dengan suggestion list. Beda dari <select> dropdown yang maksa user pilih dari opsi: datalist kasih kebebasan ketik.
💡 Native vs library. Banyak developer langsung reach for autocomplete library (Select2, react-select) padahal
<datalist>udah cukup buat use case sederhana — kota, tag, history search. Pakai dulu, kalau memang butuh fitur kompleks (filter, multi-select, async loading) baru naik level.
Sintaks <datalist>
Pasangan <input list="X"> + <datalist id="X">:
<label for="kota">Kota:</label>
<input list="daftar-kota" id="kota" name="kota">
<datalist id="daftar-kota">
<option value="Jakarta">
<option value="Bandung">
<option value="Surabaya">
<option value="Yogyakarta">
</datalist>
Cara Kerja
<input>punya atributlist="id-datalist"yang menunjuk ke<datalist id="...">.- Setiap
<option>di dalam datalist muncul sebagai saran saat user mulai mengetik. - User boleh memilih saran atau mengetik nilai lain.
Beda dari <select>
<select> |
<datalist> |
|---|---|
| Hanya boleh pilih opsi | Bisa ketik bebas |
| Selalu terbuka saat diklik | Muncul saat user mulai mengetik |
| Wajib ada value | Saran tidak wajib |
Cocok untuk: pencarian dengan history, tag suggestion, pilihan kota/negara, nama pengguna yang pernah dipakai.
🎭 Analogi sehari-hari
Pernah pas ngetik di Google search, muncul saran-saran lengkapin kalimat di bawah search box? Kamu bisa pilih saran (cepet) atau lanjut ngetik bebas (kalo gak ada yang cocok). <datalist> ngasih kamu UX yang sama di form sendiri — input dengan saran. Beda dari <select> yang maksa user pilih dari opsi yang udah ada, datalist kasih kebebasan: pilih kalo ada yang cocok, ketik bebas kalo enggak.
⚠️ Jebakan yang sering ditemui
<input list="X">+<datalist id="X">— id harus match. Tidak match = tidak ada saran muncul.- User TETAP bisa ketik nilai di luar daftar — tidak validation default. Gabung dengan
pattern/requireduntuk strict. <option>tanpa text content — value-nya yang muncul di list.- Mobile UX bervariasi — iOS/Android render datalist beda.
- Limited styling — appearance bawaan browser, susah custom.
- Untuk pure dropdown wajib pilih, pakai
<select>. - Combobox WAI-ARIA lebih kuat untuk autocomplete kompleks (custom JS).
TL;DR: <datalist> = autocomplete native untuk <input>. Setup: <input list="X"> + <datalist id="X"><option value="..."></datalist> (id harus match). Beda dari <select>: user TETAP bisa ketik bebas nilai di luar daftar (gak strict). Cocok buat pencarian dengan history, tag suggestion, pilihan kota. Limited styling — appearance browser default. Buat strict validation: kombinasi dengan pattern/required. Untuk autocomplete kompleks, pakai combobox WAI-ARIA + custom JS.
