Cara Membuat Datalis Yang Dapat Dicari Seketika

Daftar dropdown adalah cara yang rapi untuk memberikan opsi untuk bidang input, terutama ketika daftar opsi yang tersedia panjang. Seorang pengguna dapat memilih opsi yang mereka inginkan mengetik ke dalam kolom, atau lihat opsi yang mungkin cocok untuk apa yang mereka cari. Mampu mencari melalui opsi, namun, adalah solusi ideal.

Perilaku ini dapat dicapai dengan Elemen HTML itu menampilkan saran masukan untuk kontrol yang berbeda, seperti menandai. Namun hanya menampilkan opsi yang tersedia saat pengguna memilikinya sudah mengetik sesuatu ke dalam kolom input.

Kami dapat membuat bidang input lebih bermanfaat jika kami memungkinkan pengguna untuk melakukannya mengakses daftar opsi lengkap kapan saja selama proses pengambilan input.

Dalam posting ini, kita akan melihat cara membuat daftar drop-down yang dapat dicari kapan saja menggunakan menandai sama dengan itu id dari tag - ini adalah bagaimana kami mengikat mereka satu sama lain.

2. Buat Datalist Terlihat

Secara default, Elemen HTML adalah tersembunyi. Kita hanya bisa melihatnya, ketika kita mulai ketik input ke dalam bidang datalist melekat.

Namun ada cara untuk "memaksa" isi datalist (mis. Semua opsi) muncul di halaman web. Kita hanya perlu memberikan yang cocok tampilan nilai properti Selain daripada tidak ada, contohnya display: blok;.

 datalist display: block;

Opsi yang ditampilkan belum dipilih pada titik ini, browser saja merender opsi ditemukan di dalam datalist.

Seperti disebutkan di atas, karena perilaku bawaan elemen, bagian dari opsi sudah muncul dan dapat dipilih, tetapi hanya ketika pengguna mulai mengetikkan string yang dapat digunakan browser temukan opsi yang cocok.

Kita juga perlu menemukan mekanisme untuk membuatnya semua opsi (pada tangkapan layar di atas ditampilkan di bawah datalist dropdown) dapat dipilih di titik lain dari proses pengambilan input - ketika pengguna ingin memeriksa opsi sebelum mereka mengetik apa pun, atau sementara mereka telah mengambil sesuatu ke dalam kolom input.

3. Bawa masuk Elemen HTML.

Kami akan memilih metode kedua, karena lebih sederhana, dan diizinkan untuk digunakan sebagai mekanisme mundur di browser yang tidak mendukung elemen. Ketika browser tidak dapat menampilkan & menampilkan datalist, itu merender Tag HTML, kode terlihat seperti di bawah ini:

Datalist Dikombinasikan dengan Menambahkan berganda atribut ke tag, sehingga ketika pengguna memilih opsi dari daftar drop-down, nilainya akan ditampilkan di dalam bidang juga. / * ketika pengguna memilih opsi dari DDL, tuliskan ke bidang teks * / select.addEventListener ('ubah', fill_input); function fill_input () input.value = options [this.selectedIndex] .value; hide_select (); Kekurangannya Kelemahan utama dari teknik ini adalah tidak adanya cara langsung untuk mendesain elemen dengan CSS (tampilan dan