Bagaimana saya menggunakan html5 & lt; datalist & gt; elemen untuk membuat cadangan autokomplet untuk input borang?

Menggunakan elemen HTML5 <datalist></datalist> untuk autocompletion

Elemen HTML5 <datalist></datalist> menyediakan cara mudah untuk menawarkan cadangan autokomplet untuk input borang. Ia berfungsi dengan mengaitkan elemen <datalist></datalist> dengan elemen <input> menggunakan atribut list . Elemen <datalist></datalist> itu sendiri mengandungi <option></option> elements, masing -masing mewakili cadangan yang mungkin. Apabila pengguna mula menaip dalam medan <input> yang berkaitan, penyemak imbas memaparkan senarai dropdown yang mengandungi pilihan dari <datalist></datalist> .

Inilah cara anda melakukannya:

 <code class="html"><input type="text" list="browsers" name="browser"> <datalist id="browsers"> <option value="Chrome"> </option>
<option value="Firefox"> </option>
<option value="Safari"> </option>
<option value="Edge"> </option>
<option value="Opera"> </option></datalist></code>

Dalam contoh ini, elemen <input> dengan atribut list yang ditetapkan kepada "penyemak imbas" dikaitkan dengan elemen <datalist></datalist> dengan "pelayar" ID. Penyemak imbas secara automatik akan memaparkan pilihan dari <datalist></datalist> sebagai jenis pengguna dalam medan input. Pengguna kemudian boleh memilih cadangan dari lungsur turun, atau terus menaip untuk memasukkan nilai secara manual. Ambil perhatian bahawa elemen <datalist></datalist> itu sendiri tidak dipaparkan secara langsung pada halaman; Ia hanya berfungsi sebagai sumber cadangan untuk input yang dipautkan.

Menggayakan Cadangan <datalist></datalist>

Malangnya, penggayaan cadangan yang ditawarkan oleh elemen <datalist></datalist> secara langsung menggunakan CSS adalah terhad. Anda tidak boleh menggunakan senarai dropdown secara langsung dengan pemilih CSS standard. Penjual pelayar telah melaksanakan gaya rendering yang berbeza, dan tidak ada cara yang konsisten untuk mengatasi gaya ini di semua pelayar. Percubaan untuk gaya <datalist></datalist> atau unsur -unsur <option></option> dengan CSS sering tidak konsisten atau tiada kesan.

Walau bagaimanapun, anda boleh mempengaruhi penampilan secara tidak langsung. Contohnya, anda boleh gaya elemen <input> itu sendiri, yang akan menjejaskan konteks visual keseluruhan cadangan autokomplete. Anda mungkin menukar fon, sempadan, atau paddingnya. Tetapi secara langsung menggayakan dropdown tetap mencabar dan bergantung kepada penyemak imbas. Batasan ini adalah kelemahan yang signifikan menggunakan elemen <datalist></datalist> asli untuk keperluan gaya kompleks.

Isu Keserasian Pelayar dengan <datalist></datalist>

Walaupun elemen <datalist></datalist> menikmati sokongan luas di seluruh pelayar moden, anda harus mengetahui beberapa nuansa keserasian:

• Penyemak imbas yang lebih tua: Penyemak imbas yang sangat lama mungkin tidak menyokong elemen <datalist></datalist> sama sekali. Untuk pelayar yang lebih tua, anda memerlukan mekanisme sandaran, seperti menggunakan JavaScript untuk membuat fungsi autocomplete tersuai. Pengesanan ciri menggunakan JavaScript boleh membantu anda menentukan sama ada penyemak imbas menyokong <datalist></datalist> sebelum bergantung padanya.
• Rendering ketidakkonsistenan: Seperti yang dinyatakan sebelum ini, penyerahan visual cadangan boleh berubah sedikit di antara pelayar. Walaupun fungsi tetap konsisten, perbezaan halus dalam gaya mungkin diperhatikan. Ini menonjolkan keperluan untuk ujian silang penyemak imbas menyeluruh.
• Kebolehcapaian: Pastikan pelaksanaan anda boleh diakses oleh pengguna kurang upaya. Atribut ARIA yang betul mungkin diperlukan untuk meningkatkan kebolehcapaian ciri autocomplete anda, terutamanya untuk pembaca skrin.

Secara dinamik memaparkan <datalist></datalist> dengan javascript

Anda secara dinamik boleh mengisi pilihan dalam elemen <datalist></datalist> menggunakan JavaScript. Ini membolehkan membuat cadangan autokomplete yang lebih fleksibel dan didorong oleh data. Anda boleh mengambil data dari pelayan, pangkalan data, atau sumber lain.

Inilah contoh:

 <code class="javascript">const datalist = document.getElementById('myDatalist'); const options = ['apple', 'banana', 'cherry', 'date']; options.forEach(option => { const optionElement = document.createElement('option'); optionElement.value = option; datalist.appendChild(optionElement); });</code>

Coretan kod ini memilih elemen <datalist></datalist> dengan id "mydatalist" dan kemudian melangkah melalui pelbagai pilihan. Untuk setiap pilihan, ia mewujudkan elemen <option></option> yang baru, menetapkan nilainya, dan memasukkannya ke <datalist></datalist> . Pendekatan ini membolehkan anda membina cadangan secara dinamik, menawarkan pengalaman autokomplet yang lebih responsif dan boleh disesuaikan. Ingatlah untuk menyesuaikan kod ini ke sumber data khusus dan mekanisme pengambilan anda. Sebagai contoh, anda mungkin menggunakan fetch untuk mendapatkan data dari API.

Atas ialah kandungan terperinci Bagaimana saya menggunakan html5 & lt; datalist & gt; elemen untuk membuat cadangan autokomplet untuk input borang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!