Bagaimana untuk Mencipta Kotak Pilihan Boleh Dicari dengan HTML5?-tutorial css-php.cn

Bagaimana untuk Mencipta Kotak Pilihan Boleh Dicari dengan HTML5?

Linda Hamilton

Lepaskan： 2024-10-29 19:36:03

asal

326 orang telah melayarinya

How to Create a Searchable Select Box with HTML5?

Membuat Kotak Pilih dengan Pilihan Carian Menggunakan HTML5

Seorang pengguna telah bertanya tentang membangunkan kotak pilihan yang menawarkan kedua-dua fungsi carian dan terus pemilihan pilihan, seperti yang digambarkan dalam imej yang diberikan. Timbul persoalan mengenai pendekatan optimum untuk mencapai ini dan sama ada mana-mana komponen Bootstrap sedia ada boleh memudahkan tugas.

Penyelesaian

Menggunakan HTML5 dan elemen menyediakan penyelesaian yang elegan untuk masalah ini. Berikut ialah coretan kod ringkas yang menunjukkan pelaksanaannya:

<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

Dengan menggunakan atribut, elemen mengaitkan dirinya dengan elemen, membolehkan autolengkap berdasarkan pilihan yang dinyatakan dalam. Apabila pengguna mula menaip, senarai juntai bawah pilihan padanan muncul, membenarkan mereka memilih atau meneruskan menaip untuk mengecilkan keputusan. Penyelesaian ini adalah intuitif dan cekap.

Alternatif Bootstrap

Walaupun Bootstrap tidak menyediakan komponen terbina dalam yang disesuaikan khusus untuk tujuan ini, ia menawarkan perpustakaan serba boleh yang boleh dimanfaatkan untuk meningkatkan pengalaman pengguna. Dengan menggabungkan gaya tersuai dan JavaScript, pembangun boleh mencipta kotak pilihan yang didayakan carian mereka sendiri yang disepadukan dengan lancar dengan reka bentuk Bootstrap sedia ada.

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