Tutorial Laravel 5.5 - Membuat Combobox / Dropdown dengan fitur autocomplete menggunakan Select2

Tutorial laravel 5.5 kali ini akan menjelaskan bagaimana cara membuat combobox / dropdown yang memiliki fitur search autocomplete dengan menggunakan Select2. Select2 merupakan package yang dibuat dengan dasar jQuery. Pada artikel kali ini saya akan menjelaskan bagaimana cara menerapkan fitur autocomplete ini baik tanpa AJAX maupun menggunakan AJAX.

#INSTALASI

Cara melakukan instalasi Select2 ini ada 2 cara, yang pertama adalah dengan menggunakan cdn yang sudah disediakan dan yang kedua adalah dengan melakukan download resource nya terlebih dahulu. Cara pertama dilakukan dengan melakukan include seperti kode di bawah ini


<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

Untuk cara kedua yang perlu dilakukan adalah melakukan download melalui link berikut https://github.com/select2/select2. Yang kita butuhkan melalui resource tersebut adalah file css dan js nya saja. Silahkan copy file tersebut atau satu folder keseluruhan (terserah cara anda) dan lakukan include manual seperti berikut :


<link href="path-ke-direktori-css/select2.min.css" rel="stylesheet" />
<script src="path-ke-direktori-js/select2.min.js"></script>

#CARA PENGGUNAAN

Berikut ini adalah langkah-langkah yang saya lakukan untuk menggunakan Select2 ini

#Tampilan

Yang pertama saya buat adalah tampilan / interface nya terlebih dahulu. Di sini saya menggunakan bootstrap 4 sebagai contohnya. Buatlah route nya terlebih dahulu seperti contoh kode berikut :


Route::get('select2','HomeController@index');

Penamaan url, controller, dan action bisa anda sesuaikan sendiri dengan kebutuhan. Setelah route selesai dibuat langkah berikutnya adalah membuat view nya.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Select2</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
</head>
<body>
    <br/>
    <div class="container">
        <div class="row">
            <div class="col-6">
                <select name="select" class="form-control">

                </select>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>        
</body>
</html>

Kode di atas seperti yang anda lihat hanyalah kerangka kosong yang berisi satu combobox / dropdown saja. Dan pada contoh kode ini saya menggunakan css dan js dengan menggunakan url cdn yang sudah disediakan.

#Select2 Tanpa AJAX

Contoh pertama yang saya jelaskan adalah bagaimana menggunakan select di mana data dari combobox sudah tersedia dari awal (tanpa perlu melakukan ajax).


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Select2</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
</head>
<body>
    <br/>
    <div class="container">
        <div class="row">
            <div class="col-6">
                <select name="select" class="form-control select2">
                    <option value ="1"> Virginie Keam</option>
                    <option value ="2"> Archambault Devoy</option>
                    <option value ="3"> Isobel Dudbridge</option>
                    <option value ="4"> Orsa Dorran</option>
                    <option value ="5"> Harmonia Sandland</option>
                    <option value ="6"> Lusa Antrack</option>
                    <option value ="7"> Caroljean Ibanez</option>
                    <option value ="8"> Britni Philpot</option>
                    <option value ="9"> Renelle Edney</option>
                    <option value ="10"> Ursulina Pering</option>
                    <option value ="11"> Daffi Flott</option>
                    <option value ="12"> Anthea Gripton</option>
                    <option value ="13"> Ermanno Kenafaque</option>
                    <option value ="14"> Nil Hamner</option>
                    <option value ="15"> Domenic Faulds</option>
                    <option value ="16"> Loria Shaudfurth</option>
                    <option value ="17"> Joete Wilbud</option>
                    <option value ="18"> Parnell Vaune</option>
                    <option value ="19"> Geri Espinay</option>
                    <option value ="20"> Suzy Haslehurst</option>
                </select>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {
            $('.select2').select2();
        });
    </script>
</body>
</html>

Cara ini sangat mudah untuk diterapkan. Yang perlu anda lakukan hanyalah menambahkan option apa saja pada combobox dan kemudian mengubahnya dengan script select2. Pada contoh kode di atas saya menambahkan nama class select2 pada input select dan kemudian pada scrip di bagian bawah saya menggunakan perintah $('.select2').select2(); untuk mengubah combobox tersebut menjadi combobox dengan fitur autocomplete.

#Select2 Menggunakan AJAX

Cara ini biasanya saya gunakan jika data pada combobox tersebut terlalu banyak (ribuan) sehingga akan memakan resource yang banyak jika saya langsung menampilkan semua datanya di awal.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Select2</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
</head>
<body>
    <br/>
    <div class="container">
        <div class="row">
            <div class="col-6">
                <select name="select" class="form-control select2">
                </select>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {
            $('.select2').select2({
                    placeholder: 'Nama Peserta',
                    minimumInputLength: 3,
                    ajax: {
                        url: "<?=url('/browse/peserta');?>",
                        dataType: 'json',
                        delay: 250,
                        data: function (params) {
                                return {
                                    q: params.term
                                    //tambahkan parameter lainnya di sini jika ada
                                }
                        },
                        processResults: function (data) {
                            return {
                                results:  $.map(data, function (item) {
                                        return {
                                            text:  item.nama+ ' - ' + item.bagian,
                                            id: item.NIK
                                        }
                                    })
                            };
                        },
                        cache: true
                    },
                    templateSelection: function (selection) {
                        var result = selection.text.split('-');
                        return result[0];
                    }
                });
            });
    </script>
</body>
</html>

Contoh kode di atas adalah cara melakukan pemanggilan select2 dengan menggunakan ajax. Di sana saya menggunakan property minimumInputLength yang berfungsi untuk memberikan batasan karakter sebelum pencarian dilakukan. Berdasarkan contoh di atas pencarian baru dilakukan jika user mengetikkan minimal 3 karakter.

data: function (params) {
return {
q: params.term
//tambahkan parameter lainnya di sini jika ada
}
},

Jika pemanggilan ajax yang anda lakukan membutuhkan parameter tambahan, anda dapat menambahkannya pada bagian ini. Misalnya anda menambahkan parameter status maka kode nya akan menjadi seperti berikut

data: function (params) {
return {
q: params.term,
status : 1
}
},

Untuk melakukan modifikasi isi dari value dan text dari combobox dapat dilakukan pada kode berikut

processResults: function (data) {

return {

results: $.map(data, function (item) {

return {

text: item.nama+ ' - ' + item.bagian,

id: item.NIK

}

})

};

Pada contoh kode di atas saya memodifikasi datanya di mana id dari option combobox akan menggunakan field NIK dan text dari option tersebut akan menampilkan gabungan dari nama dan juga bagian. Anda juga dapat melakukan modifikasi teks yang ditampilkan setelah anda memilih inputan combobox dengan menggunakan kode berikut :

templateSelection: function (selection) {

var result = selection.text.split('-');

return result[0];

}

Saat anda selesai memilih option maka teks yang ditampilkan hanya namanya saja bukan nama dan bagian seperti saat anda melakukan pencarian autocomplete tadi. Caranya adalah dengan melakukan modifikasi menggunakan kode di atas. Cara kerja dari kode di atas adalah, saya melakukan split text "nama - bagian" dari text yang ditampilkan dan kemudian hanya mengambil bagian namanya saja.


<?php 
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Controllers;

use App\Model\Peserta;

class HomeController extends Controller {
    public function index() 
    {
        return view ('select2');
    }

    public function browse(Request $request){
        $data = Peserta::whereRaw("(nama LIKE '%".$request->get('q')."%' OR bagian LIKE '%".$request->get('q')."%')")
                ->limit(30)
                ->get();
        return response()->json($data);
    }

}

Bagian terakhir adalah menambahkan action untuk browse dari pemanggilan ajax yang dilakukan sebelumnya. Parameter yang digunakan untuk menampung teks pencarian adalah "q" dan parameter lainnya ditampung sesuai dengan penamaan variabel yang anda gunakan pada bagian data dari fungsi ajax yang telah dijelaskan sebelumnya.

Demikianlah penjelasan dari artikel Tutorial Laravel 5.5 - Membuat Combobox / Dropdown dengan fitur autocomplete menggunakan Select2. Semoga bermanfaat dan selamat mencoba.

laravel php programming