Cara menggunakan php selection box

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.

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.

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

    
    <html lang="en">
    <head>
        
        <link href="https://cdn.jsdelivr.net/npm//dist/css/select2.min.css" rel="stylesheet" />
        
        <link rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/@ttskch//dist/select2-bootstrap4.min.css">
        
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm//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 Boxlabel>
                        <select id="kota" name="kota" class="form-control">
                            <option value="">option>
                            <option value="Jakarta">Jakartaoption>
                            <option value="Bogor">Bogoroption>
                            <option value="Depok">Depokoption>
                            <option value="Tangerang">Tangerangoption>
                            <option value="Bekasi">Bekasioption>
                            <option value="Bandung">Bandungoption>
                            <option value="Semarang">Semarangoption>
                            <option value="Yogyakarta">Yogyakartaoption>
                            <option value="Surabaya">Surabayaoption>
                        select>
                    div>
                div>
            div>
            <div class="card mt-2">
                <div class="card-body">
                    <div class="form-group">
                        <label>Multi Select Boxlabel>
                        <select id="kota2" name="kota2[]" class="form-control" multiple="multiple">
                            <option value="">option>
                            <option value="Jakarta">Jakartaoption>
                            <option value="Bogor">Bogoroption>
                            <option value="Depok">Depokoption>
                            <option value="Tangerang">Tangerangoption>
                            <option value="Bekasi">Bekasioption>
                            <option value="Bandung">Bandungoption>
                            <option value="Semarang">Semarangoption>
                            <option value="Yogyakarta">Yogyakartaoption>
                            <option value="Surabaya">Surabayaoption>
                        select>
                    div>
                div>
            div>
        div>
        
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous">script>
        
        <script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js"
            integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
            crossorigin="anonymous">script>
        
        <script src="https://cdn.jsdelivr.net/npm//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.

Cara menggunakan php selection box

Cara Menggunakan Select2

Bài Viết Liên Quan

Cara menggunakan save image temporary python

Ekstensi kode studio visual html css

Https notfound PHP

Cara menggunakan integer to date python

Python mengganti karakter dalam file teks

Cara mengecek nomor npwp yang hilang

Bagaimana Anda membuat diagram di mysql?

Cara menggunakan contoh perulangan while php

Marksheet code in JavaScript

Cara menggunakan perintah dasar python

Cara menggunakan baris ungroup di excel

Apakah bisa transfer dari OVO ke GoPay?

Cara menghapus squarespace javascript yang tidak terpakai

Bagaimana Anda mengarahkan ke halaman lain di html setelah mengirimkan?

Scrape website to Excel

Cara menggunakan php max_input_vars not updating

Cara menggunakan website forum php

Cara aktivasi kartu BRIZZI di ATM BRI

Cara menggunakan const javascript adalah

Cara menggunakan mysql aplikasi apa?

Có thể bạn quan tâm

Google Sheets difference between two columns

Cara mengunduh kamus dengan python

Apa perbedaan list dan array pada python?

How do I push data from one Excel workbook to another?

Cara menggunakan raise vs return python

Cara konfigurasi mysql di xampp

Spreadsheet odoo

Cara mengubah server phpmyadmin

Cara membuat paragraf di css

Cara menggunakan perbedaan laravel dan php

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội