Formulir HTML: Select-Option vs Datalist-Option

Saya bertanya-tanya apa perbedaan antara Select-Option dan Datalist-Option. Adakah situasi di mana akan lebih baik jika menggunakan satu atau yang lain? Contoh dari masing-masing berikut:

Pilih opsi

<select name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select>

Opsi Datalist

<input type=text list=browsers>
<datalist id=browsers>
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Anggap saja sebagai perbedaan antara persyaratan dan saran. Untuk selectelemen, pengguna diminta untuk memilih salah satu opsi yang Anda berikan. Untuk datalistelemen, disarankan agar pengguna memilih salah satu opsi yang Anda berikan, tetapi dia benar-benar dapat memasukkan apa pun yang dia inginkan di input.

Sunting 1: Jadi mana yang Anda gunakan tergantung pada kebutuhan Anda. Jika pengguna harus memasukkan salah satu pilihan Anda, gunakan selectelemen. Jika digunakan dapat memasukkan apa saja, gunakan datalistelemen.

Sunting 2: Menemukan berita gembira ini dalam Standar Hidup HTML : "Setiap elemen opsi yang merupakan turunan dari elemen datalist ... mewakili sebuah saran."

Dari sudut pandang teknis mereka sangat berbeda. <datalist>adalah wadah abstrak opsi untuk elemen lain. Dalam kasus Anda, Anda telah menggunakannya dengan <input type="text"tetapi Anda juga dapat menggunakannya dengan rentang, warna, tanggal, dll. Http://demo.agektmr.com/datalist/

Jika menggunakannya dengan input teks, sebagai jenis pelengkapan otomatis, maka pertanyaan sebenarnya adalah: Apakah lebih baik menggunakan input teks bentuk bebas, atau daftar opsi yang telah ditentukan? Dalam hal ini saya pikir jawabannya sedikit lebih jelas.

Jika kita fokus pada penggunaan <datalist>sebagai daftar opsi untuk bidang teks maka berikut adalah beberapa perbedaan spesifik antara itu dan kotak pilih:

• Sebuah <datalist>kotak teks makan memiliki string tunggal untuk kedua label dan menyerahkan display. Kotak pilih dapat memiliki nilai kirim vs. label tampilan yang berbeda <option value='ie'>Internet Explorer</option>.
• Sebuah <datalist>kotak teks makan tidak mendukung <optgroup>tag untuk mengatur tampilan.
• Anda tidak dapat membatasi pengguna ke daftar opsi <datalist>seperti yang Anda bisa dengan <select>.
• Acara onchange bekerja secara berbeda. Pada <select>elemen, peristiwa onchange diaktifkan segera setelah perubahan, sedangkan dengan <input type="text"peristiwa diaktifkan setelah elemen kehilangan fokus atau pengguna menekan enter.
• <datalist>memiliki dukungan yang sangat buruk di seluruh browser. Cara untuk menampilkan semua opsi yang tersedia tidak konsisten, dan hal-hal hanya menjadi lebih buruk dari sana.

Poin terakhir benar-benar yang besar menurut saya. Karena Anda HARUS memiliki fallback pelengkapan otomatis yang lebih universal, maka hampir tidak ada alasan untuk mengalami kesulitan dalam mengonfigurasi file <datalist>. Ditambah pluging autocomplete yang layak akan memungkinkan cara untuk menata tampilan opsi Anda, yang <datalist>tidak bisa dilakukan. Jika <datalist>menerima <li>elemen yang dapat Anda manipulasi sesuka Anda, itu akan sangat bagus! Tapi tidak.

Juga sejauh yang saya tahu, <datalist>pencarian adalah pencocokan tepat dari awal string. Jadi jika Anda pernah <option value="internet explorer">dan Anda mencari 'penjelajah' Anda tidak akan mendapatkan hasil. Kebanyakan plugin pelengkapan otomatis akan mencari di mana saja dalam teks.

Saya hanya menggunakan <datalist>sebagai pembantu kenyamanan cepat dan malas untuk beberapa halaman internal di mana saya tahu dengan kepastian 100% bahwa pengguna memiliki Chrome atau Firefox terbaru, dan tidak akan mencoba mengirimkan nilai palsu. Untuk kasus lain, sulit untuk merekomendasikan penggunaan <datalist>karena dukungan browser yang sangat buruk.

Datalist menyertakan pelengkapan otomatis dan saran secara bawaan, ini juga memungkinkan pengguna memasukkan nilai yang tidak ditentukan dalam saran.

Select only memberi Anda opsi yang ditentukan sebelumnya yang harus dipilih pengguna

Daftar Data adalah tag HTML baru di browser yang didukung HTML5. Ini menjadikan sebagai kotak teks dengan beberapa daftar opsi. Untuk kotak Contoh Teks Jenis Kelamin akan memberi Anda opsi sebagai Pria Wanita saat Anda mengetik 'M' atau 'F' di Kotak Teks.

<input list="Gender">
<datalist id="Gender">
  <option value="Male">
  <option value="Female> 
</datalist>

Untuk menjawab secara spesifik sebagian dari pertanyaan Anda "Adakah situasi di mana akan lebih baik jika menggunakan salah satu atau yang lain?", Pertimbangkan formulir dengan bagian yang berulang. Jika bagian berulang berisi banyak selecttag, maka options harus dirender untuk setiap pemilihan, untuk setiap baris.

Dalam kasus seperti itu, saya akan mempertimbangkan untuk menggunakan datalistwith input, karena hal yang sama datalistdapat digunakan untuk sejumlah inputs. Ini berpotensi menghemat banyak waktu rendering di server, dan akan menskalakan jauh lebih baik ke sejumlah baris.

Saya perhatikan bahwa tidak ada fitur yang dipilih di datalist. Ini hanya memberi Anda pilihan tetapi tidak dapat memiliki opsi default. Anda juga tidak dapat menampilkan opsi yang dipilih di halaman berikutnya.

Ada perbedaan penting lainnya antara selectdan datalist. Inilah faktor dukungan browser.

select didukung secara luas oleh browser dibandingkan dengan datalist. Silakan lihat halaman ini untuk dukungan browser lengkap datalist--

Dukungan browser Datalist

Dimana pilih didukung secara efektif di semua browser (sejak IE6 +, Firefox 2+, Chrome 1+ dll)

Ini mirip dengan memilih, Tetapi datalist memiliki fungsi tambahan seperti saran otomatis. Anda bahkan dapat mengetik dan melihat saran saat dan saat Anda mengetik.

Pengguna juga akan bisa menulis item yang tidak ada di daftar.