Framework7: mengatasi error pencarian data pada smartSelect

Smart Select adalah salah satu fitur dari framework7, yang mempermudah dalam pemilihan data. Data yang dipilih  bisa secara satuan maupun lebih dari satu. Selain itu ada fitur pencariana datanya, sehingga dengan mudah kita mencari data yang akan di pilih jika terdapat banyak pilihan.

Smart select ini merupakan gabungan dari fungsi-fungsi dari element input, list view, searchbar dan  select, dan sangat mempermudah untuk fitur pemilihan data dalam jumlah yang besar. Untuk menggunakannya kita bisa tulisan datanya secara tetap maupun dinamik, sesuai dengan kebutuhan.

Contoh penggunaan dari fitur smartSelect dapat di baca dan di pelajari  di https://v5.framework7.io/docs/smart-select.html, disitu di ulas secara detail cara penggunaan smartSelect, berikut dengan detail parameter, events, methods dan layoutnya.

Dari contoh penggunaan smartSelect di situs resminya, tidak ada contoh bagaimana menggunakan smartSelect di element input, di Form CURD biasanya kita di hadapkan dengan beberapa input baik isian bebas, pilihan, upload file dan tombol.

Kendala akan muncul jika kita di hadapkan dengan input data yang merupakan pilihan dari kumpulan data yang disediakan dalam jumlah besar, pengguna akan kesulitan jika pilihan data dalam jumlah besar, butuh waktu yang lama jika tidak ada menu pencarian data tersebut. Jika ada menu pencarian pengguna dengan mudah mencara pilihan data yang di cari, dan fungsi itu ada di element smartSelect di Framework7.

Setelah menyesuaikan penggunaan smartSelect di element input, dan berhasil menambahkan data secara dinamik di element select sebagai data pilihan yang akan dimunculkan ketika element input ditekan, masalah terjadi fitur pencarian data tidak fungsi, ketika di ketik apapun data di select tidak tampil dilayar.

Kalo data pilihannya sedikit tidak masalah, tetapi jika banyak tentu pengguna akan merasa kesulitan jika fitur pencarian tidak berfungsi. Berikut adalah contoh bagaimana mengaktifkan fitur pencarian di smartSelect. Mungkin saya dalam penggunaan smartSelect belum maksimal sehingga fitur pencarian di smartselect tidak berjalan sesuai dengan contoh yang ada di situr resminya.

$(document).on('input','.searchbar-input-wrap input[type=search]', function (e){ 
 let select = document.querySelectorAll('.hidden-by-searchbar'); 
 var keyword = $(this).val().toUpperCase(); 
 for (var i = 0; i < select.length; i++) {
 var cl=select[i].childNodes; 
 var text=select[i].childNodes[1].children[0].getAttribute('value') 
 if (text.indexOf(keyword)>-1) { 
 select[i].classList.remove('hidden-by-searchbar') 
 } else {
 select[i].classList.add('hidden-by-searchbar') } 
 } 
})

 

framework7 hybrid Javascript smartSelect Juni 13, 2021