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.
 |
| 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.
 |
| 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.
 |
| 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.
Posting Komentar