Site icon agussuratna.net

Membuat Kotak Pencarian pada Dropdown dengan Select2

Agus Suratna

Ketika kita membuka suatu website dan menjumpai sebuah form dropdown select option dengan kotak pencarian didalamnya, kotak pencarian tersebut akan mempermudah kita dalam memilih opsi yang ada pada dropdown tersebut. Bayangkan saja jika opsinya terdapat puluhan bahkan ribuan opsi, kita harus scroll mouse kita sampai ke bawah. Dengan adanya kotak pencarian di dalam sebuah dropdown select option kita akan dipermudah untuk mencari pilihan dalam list dropdown tanpa harus scroll sampai kebawah.

Pada dasarnya terdapat beberapa plugins yang bisa digunakan, 3 diantaranya adalah select2, chosen, dan selectize. Pada tutorial ini akan dibahas dengan menggunakan select2.

Ada 2 cara untuk menghubungkan halaman website kita dengan plugin select2 ini :

  1. Cara online
  2. Cara offline dengan mngunduh plugin select2

Untuk cara online kita bisa menghubungkannya dengan menuliskan sintak diantara tag <head> dan </head> seperti berikut ini :

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

Kelebihan dengan cara online kita tidak mendownload plugin select2, karena langsung terhubung dengan plugin tersebut secara online, kekurangannya kita harus terkoneksi terus dengan internet.

Selanjutnya secara offline, tahapannya seperti berikut ini :

  1. Buat folder project di dalam htdocs, misal dengan nama belajarselect2, di dalam folder belajarselect2 buat folder baru dengan nama assets
  2. Siapkan plugin select2 dengan mengunduh di websitenya dengan alamat https://github.com/select2/select2/tags
  3. Setelah selesai mendownload, ekstrak hasil download tersebut, kita hanya memerlukan file yang ada didalam folder css dan js yang ada dalam folder dist, jadi copy kedua folder tersebut (css dan js) kedalam folder project kita, simpan di dalam folder assets
  4. Download jquery di sini, jquery diperlukan karena select2 akan jalan jika ada jquery. Simpan file jquery tersebut (jquery-3.5.1.min) di dalam folder assets
  5. Buat halaman web yang terdapat menu untuk form dropdown menggunakan tag select option. Contoh seperti berikut ini : 
    <!DOCTYPE html>
<html>
    <head>
        <title>Belajar Select 2 | www.agussuratna.net</title>
        <link href="assets/css/select2.min.css" rel="stylesheet" />
        <script src="assets/js/jquery-3.5.1.min.js"></script>
        <script src="assets/js/select2.min.js"></script>
    </head>

    <body>
        <form method="POST">
            <select id="kabupaten" name="kabupaten">
                <option></option>
                <option value="1">Kota Bandung</option>
                <option value="2">Kabupaten Bandung</option>
                <option value="3">Kabupaten Bandung Barat</option>
                <option value="4">Kota Cimahi</option>
                <option value="5">Kota Depok</option>
                <option value="6">Kabupaten Bogor</option>
                <option value="7">Kota Bogor</option>
                <option value="8">Kabupaten Sukabumi</option>
                <option value="9">Kota Sukabumi</option>
                <option value="10">Kabupaten Bekasi</option>
                <option value="11">Kota Bekasi</option>
                <option value="12">Kabupaten Karawang</option>
                <option value="13">Kabupaten Purwakarta</option>
                <option value="14">Kabupaten Subang</option>
                <option value="15">Kota Cirebon</option>
                <option value="16">Kabupaten Cirebon</option>
                <option value="17">Kabupaten Indramayu</option>
                <option value="18">Kabupaten Majalengka</option>
            </select>
        </form>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#kabupaten').select2({
                    placeholder: 'Pilih Kabupaten/Kota',
                    allowClear: true
                });
            });
        </script>
    </body>
</html>

    Perhatikan sintak di atas, untuk menghubungkannya ada pada :

    <link href="assets/css/select2.min.css" rel="stylesheet" />
<script src="assets/js/jquery-3.5.1.min.js"></script>
<script src="assets/js/select2.min.js"></script>

    sintak untuk menghubungkan jquery (jquery-3.5.1.min.js) harus lebih dulu ditulis (di atas) sintak untuk menghubungkan select2.min.js, hal ini karena select2 dibantu oleh jquery bukan sebaliknya. Konfigurasi untuk select optionnya terdapat pada :

    <script type="text/javascript">
    $(document).ready(function() {
        $('#kabupaten').select2({
            placeholder: 'Pilih Kabupaten/Kota',
            allowClear: true
        });
    });
</script>

Sekarang kita coba jalankan pada browser dengan cara mengakses alamat http://localhost/belajarselect2 , hasilnya akan seperti berikut ini :

Baca Juga  Tutorial Laravel 11 : #2 Route

Demikian tutorial membuat membuat kotak pencarian pada dropdown dengan Select2, jika ada pertanyaan silahkan tuliskan di kolom komentar. Semoga bermanfaat.

Exit mobile version