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

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

Pendekatan mudah untuk mencapai fungsi ini menggunakan

<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>

Dalam kod ini, elemen menentukan "kening" sebagai

Fungsi Carian

Keajaiban berlaku apabila pengguna mula menaip dalam medan input. Penyemak imbas secara automatik akan menapis

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>

Dengan membalut dan

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!