Rumah > Artikel > hujung hadapan web > 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!