Bagaimana untuk Mencipta Kotak Pilihan Boleh Dicari dengan HTML dan Bootstrap?

Mencipta Kotak Pilihan Terperinci dengan Fungsi Carian

Meningkatkan kotak pilihan tradisional dengan keupayaan carian boleh meningkatkan pengalaman pengguna dan kecekapan kemasukan data dengan ketara . Berikut ialah penyelesaian menggunakan HTML dan Bootstrap untuk mencapainya.

Pelaksanaan:

Pelaksanaan melibatkan penciptaan borang dengan medan teks dan kotak pilihan seperti berikut:

<code class="html"><form>
  <input type="text" list="brow" placeholder="Search...">
  <datalist id="brow">
    <option value="Internet Explorer"></option>
    <option value="Firefox"></option>
    <option value="Chrome"></option>
  </datalist>

  <select>
    <option value="ie">Internet Explorer</option>
    <option value="ff">Firefox</option>
    <option value="cr">Chrome</option>
  </select>
</form></code>

• Medan Teks: Medan teks dengan atribut senarai membenarkan pengguna menaip input dan memaparkan pilihan padanan daripada senarai data.
• Senarai Data: Senarai data mentakrifkan senarai pilihan yang dipratakrifkan untuk medan carian.
• Kotak Pilih: Kotak pilih menyediakan pilihan pilihan tradisional, yang juga boleh dikemas kini berdasarkan input carian.

Penyesuaian:

Bootstrap menyediakan pelbagai kelas untuk menyesuaikan penampilan medan teks dan kotak pilih, seperti menambah kumpulan input atau penggayaan untuk komponen yang berbeza. Contohnya, CSS berikut menambahkan ikon carian pada medan teks:

<code class="css">input[list] {
  padding-right: 30px;
}

input[list]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  background: url(search.png) no-repeat;
  background-size: contain;
}</code>

Kesimpulan:

Dengan menggabungkan HTML, Bootstrap dan coretan kod ringkas, kita boleh mencipta kotak pilihan yang sangat berfungsi dengan keupayaan carian. Penyelesaian ini menyediakan cara yang lebih mudah dan mesra pengguna untuk memasukkan data, menjadikannya amat berguna untuk senarai panjang atau kompleks.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Kotak Pilihan Boleh Dicari dengan HTML dan Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!