Membuat Fitur Cari di Dalam Dropdown Select dengan Select2

Share:
Halo semuanya kembali lagi di sahretech. Select2 adalah salah satu library javascript yang cukup populer digunakan untuk membuat custom option select pada html. Salah satu permasalahan awalnya adalah ketika kita memiliki list data yang sangat banyak, dan list data ini digunakan sebagai list kategori yang dimasukkan ke dalam option select.


Tidak masalah jika list datanya hanya sedikit, sekitar puluhan data saja, yang jadi masalah adalah saat list data sudah mencapai ratusan bahkan ribuan. Dimana user akan sangat kesal mencari tumpukan data yang sangat banyak tanpa ada fitur pencarian.

Nah, pada kesempatan kali ini kita akan mengimplementasikan select2 pada option select. Select2 akan membuat fitur pencarian pada option select, sehingga saat ada tumpukan data yang banyak, user hanya perlu mengetikan beberapa huruf yang dicari maka hasilnya akan langsung terlihat.

cara menggunakan select2
Contoh select2



Select2 biasanya digunakan untuk filtering data, contohnya bisa digunakan untuk mencari nama siswa yang jumlahnya bisa ratusan hingga ribuan, atau bisa juga digunakan untuk filtering data wilayah seperti provinsi, kecamatan, atau kelurahan. Intinya select2 biasa digunakan untuk memudahkan pemilihan data dengan daftar yang sangat banyak.

Baca Artikel Lain ✨
📰 1. Membuat Notifikasi Realtime dengan php dan Jquery read more
📰 2. Cara Membuat Hide/Show Input Password dengan Javascript dan Bootstrap read more
📰 3. Cara Mencegah Multiple Submit dan Cara Menggunakan Spinner Bootstrap sebagai Indicator Loading pada Php read more

Cara Menggunakan Select2

Membuat select2 sangat mudah sekali, kalian hanya perlu membuat tag option select seperti biasa, lalu menambahkan id pada option select tersebut dan menambahkan sedikit javascript. Konfigurasinya sangat mudah sekali, secara default kalian langsung bisa menggunakan select2 tanpa banyak melakukan pengaturan.

Berikut ini ada dua contoh select2 yang telah saya buat dalam sebuah file. Yaitu select2 single select box dan select2 multiple select box. Silahkan buat sebuah file baru, lalu copy script di bawah ini dan pastekan ke dalam file tersebut

    

<!DOCTYPE html> <html lang="en"> <head> <!-- css untuk select2 --> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <!-- jika menggunakan bootstrap4 gunakan css ini --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@x.x.x/dist/select2-bootstrap4.min.css"> <!-- cdn bootstrap4 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> </head> <body> <div class="container mt-5"> <div class="card"> <div class="card-body"> <div class="form-group"> <label>Single Select Box</label> <select id="kota" name="kota" class="form-control"> <option value=""></option> <option value="Jakarta">Jakarta</option> <option value="Bogor">Bogor</option> <option value="Depok">Depok</option> <option value="Tangerang">Tangerang</option> <option value="Bekasi">Bekasi</option> <option value="Bandung">Bandung</option> <option value="Semarang">Semarang</option> <option value="Yogyakarta">Yogyakarta</option> <option value="Surabaya">Surabaya</option> </select> </div> </div> </div> <div class="card mt-2"> <div class="card-body"> <div class="form-group"> <label>Multi Select Box</label> <select id="kota2" name="kota2[]" class="form-control" multiple="multiple"> <option value=""></option> <option value="Jakarta">Jakarta</option> <option value="Bogor">Bogor</option> <option value="Depok">Depok</option> <option value="Tangerang">Tangerang</option> <option value="Bekasi">Bekasi</option> <option value="Bandung">Bandung</option> <option value="Semarang">Semarang</option> <option value="Yogyakarta">Yogyakarta</option> <option value="Surabaya">Surabaya</option> </select> </div> </div> </div> </div> <!-- wajib jquery --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <!-- js untuk bootstrap4 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script> <!-- js untuk select2 --> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> <script> $(document).ready(function () { $("#kota").select2({ theme: 'bootstrap4', placeholder: "Please Select" }); $("#kota2").select2({ theme: 'bootstrap4', placeholder: "Please Select" }); }); </script> </body> </html>

Silahkan save file, lalu jalankan file tersebut di browser kalian. Maka hasilnya akan tampak seperti gambar di bawah ini. Berikut ini contoh select2 single select box, dimana ada penambahan fitur pencarian.

membuat pencarian dalam option select dengan select2
Select2 single select box



Berikut ini adalah contoh select2 multiple select box, selain ada fitur pencarian, kalian bisa memilih lebih dari satu data. Select2 model ini cocok digunakan pada post, dimana setiap post memiliki kategori dan tag yang lebih dari satu jenis.

membuat pencarian dalam option select dengan select2
Select2 multiple select box



Jika kalian ingin menampilkan data yang bersumber dari database. Caranya juga mudah sekali, kalian tinggal lakukan looping data pada option selectnya saja.

Ok sekian tutorial cara membuat pencarian dalam option select dengan select2. Semoga tutorial singkat ini dapat bermanfaat, jika ada yang ingin ditanyakan silahkan tinggalkan pesan kalian di kolom komentar di bawah ini.

No comments

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik