Bagaimanakah saya boleh membuat kotak pilihan yang boleh dicari menggunakan senarai data HTML dan atribut senarai input?-tutorial css-php.cn

Bagaimanakah saya boleh membuat kotak pilihan yang boleh dicari menggunakan senarai data HTML dan atribut senarai input?

Linda Hamilton

Lepaskan： 2024-10-31 09:48:29

asal

688 orang telah melayarinya

How can I create a searchable select box using HTML's datalist and input list attributes?

Mencipta Kotak Pilihan dengan Input Pengguna Dipertingkat

Pengguna selalunya lebih suka kemudahan kotak pilihan untuk memasukkan teks secara manual, tetapi kadangkala terdapat memerlukan pilihan input yang lebih serba boleh. Memperkenalkan kotak pilihan dengan ciri carian terbina dalam membolehkan pengguna mencari item yang dikehendaki dengan mudah.

Memanfaatkan HTML; dan Atribut

Pendekatan mudah untuk mencapai fungsi ini menggunakan HTML; dan sifat-sifat. Begini cara ia berfungsi:

<code class="html"><input list="brow">
<datalist id="brow">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist></code>

Salin selepas log masuk

Dalam kod ini, elemen menentukan "kening" sebagai yang berkaitan. mengandungi elemen yang mewakili item yang akan disenaraikan dalam kotak pilihan.

Fungsi Carian

Keajaiban berlaku apabila pengguna mula menaip dalam medan input. Penyemak imbas secara automatik akan menapis item berdasarkan input dan memaparkan pilihan yang berkaitan sahaja. Ini memberikan pengalaman carian yang lancar dan intuitif dalam kotak pilihan.

Menggayakan dengan Bootstrap

Walaupun penyelesaian ini berfungsi sepenuhnya, anda boleh meningkatkan penampilan dan tingkah lakunya menggunakan Bootstrap's kelas CSS yang berkuasa. Berikut ialah contoh:

<code class="html"><div class="form-group">
  <label for="browser">Browser:</label>
  <input list="brow" class="form-control" id="browser">
</div>
<datalist id="brow">
  ...
</datalist></code>

Salin selepas log masuk

Dengan membalut dan elemen dalam dan menambahkan kelas "kawalan bentuk", anda akan memberikan kotak pilihan penampilan yang padat dan moden yang sejajar dengan penggayaan Bootstrap.

Atas ialah kandungan terperinci Bagaimanakah saya boleh membuat kotak pilihan yang boleh dicari menggunakan senarai data HTML dan atribut senarai input?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!