Membuat Select Combo Box Berantai Dinamis Dengan Auto Complete Pada Pemrograman Web Dengan JS & Ajax.

LATAR BELAKANG

PEMBAHASAN

Plugin dan Database

1. JQuery
   
   Salah satu plugin JavaScript yang hukumnya wajib ada agar plugin yang lain dapat digunakan.

   https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js

2. Select2
   
   Inilah plugin yang berfungsi untuk Combo Box. Plugin ini juga sudah ada fitur Auto Complete.

   https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js

   https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css

3. Database Wilayah Indonesia
   Wilayah Administratif Indonesia

Source Code

1. Buat Form Input
   
   Buat dulu form untuk input-nya disini. Form Combo Box pertama harus terisi untuk Trigger ke combo box lain, terserah bagaimana mengisi list combo box pertama di sini contohnya menggunakan PHP native dengan MYSQLI.
   
   Contoh Form : hasilnya nanti seperti gambar thumbnails artikel ini. db.php adalah file PHP untuk koneksi database.

   <form>
       <select class="select2" style="width: 25%" id="provinsi">
           <option value="">---- Pilih Provinsi ----</option>
           <?php
               include 'db.php';
               $query = "select * from provinces";
               $result = $konek->query($query);
               if (!$result) {
                   printf("Errormessage: %s\n", $konek->error);
               }
               while($data = $result->fetch_array(MYSQLI_ASSOC)){
           ?>
           <option value="<?= $data['id'] ?>"><?= $data['name'] ?></option>
           <?php
               }
           ?>
       </select><br/><br/>
       <select class="select2" style="width: 25%" id="kabupaten">
           <option value="">---- Pilih Kabupaten ----</option>
       </select><br/><br/>
       <select class="select2" style="width: 25%" id="kecamatan">
           <option value="">---- Pilih Kecamatan ----</option>
       </select>
   </form>

   Jangan lupa file plugin di masukan dalam kode juga. CSS berada di tag HEAD dan JS berada pada tag BODY
   
   
2. Buat API
   
   Buat fungsi untuk mengambil kabupaten dan kecamatan dari database berdasarkan pilihan sebelumnya. Penulis lebih suka menyebut ini sebagai API, hanya saja response yang dikembalikan bukan XML maupun JSON namun langsung echo / string. Contohnya fungsinya seperti dibawah ini.

   <?php
       include 'db.php';
       $id = $_POST['id'];
       $option = $_POST['op'];
       if($option == '1'){
           $query = "select id, name from regencies where province_id =".$id;
           $result = $konek->query($query);
           if (!$result) {
               printf("Errormessage: %s\n", $konek->error);
           }else{
               echo "<option value=''> --- pilih Kabupaten ---- </option>";
               while($data = $result->fetch_array(MYSQLI_ASSOC)){
                   echo "<option value='".$data['id']."'>".$data['name']."</option>";
               }
           }
       }else{
           $query = "select id, name from districts where regency_id =".$id;
           $result = $konek->query($query);
           if (!$result) {
               printf("Errormessage: %s\n", $konek->error);
           }else{
               echo "<option value=''> --- pilih Kecamatan ---- </option>";
               while($data = $result->fetch_array(MYSQLI_ASSOC)){
                   echo "<option value='".$data['id']."'>".$data['name']."</option>";
               }
           }
       }
   ?>

   
   
3. Imlementasi Javascript
   
   Buat kode JavaScript untuk mengaktifkan Auto Complete pada Combo Box. Letakan kode JavaScript ini di bawah kode untuk memanggil JS Plugin.

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

   Buat JavaScript untuk menangani input dari pengguna pada semua combo box yang menjadi Trigger untuk mengubah combo box yang lain, pada contoh ini yang menjadi Trigger adalah provinsi dan kabupaten. Karena API sebelumnya sudah dibuat menggunakan method POST maka AJAX yang mengirim request juga menggunakan method POST. Letakan kode JavaScript ini di bawah kode untuk memanggil JS Plugin.

   <script>
       $(document).ready(function() {
           $("#provinsi").change(function() {
               var postForm = {
                       'id': document.getElementById("provinsi").value,
                       'op': 1
               };
               $.ajax({
                   type: "post",
                   url: "http://localhost/combo-box/wilayah.php",
                   data: postForm,
                   success: function(data) {
                        $("#kabupaten").html(data);
                   }
               });
           });
           $("#kabupaten").change(function() {
               var postForm = {
                       'id': document.getElementById("kabupaten").value,
                       'op': 2
               };
               $.ajax({
                   type: "post",
                   url: "http://localhost/combo-box/wilayah.php",
                   data: postForm,
                   success: function(data) {
                       $("#kecamatan").html(data);
                   }
               });
           });
       });
   </script>

KESIMPULAN