Select search box ajax Codeigniter WIlayah Indonesia

Pada kesempatan ini saya akan berbagi tutorial bagaimana membuat select search box yang beruntun atau biasa di sebuat combo box search dengan menggunakan bootstrap ajax CodeIgniter.

Pada Form field select pasti kita jumpai beebrapa yang membutuhkan select box dan search pencarian data dan lalu di munculkan data sub dari select box pertama tampil field form kedua.

Sebenarnya cukup mudah dengan basic pengtahuan ajax, php saja..
ok langsung saja, di sini sayang menggunakan framework php codeIgniter dan Bootsrap 4, sertal library select2.js untuk memberikan fitur pencarian pada form field select box atau combo box.

Select seacrh box ajax Codeigniter WIlayah Indonesia

Di sini saya menggunakan database wilayah adminstrasi indonesia dari github..

silahkan di lin di bawah :

https://github.com/edwardsamuel/Wilayah-Administratif-Indonesia/tree/master/mysql

Karena saya di sini menggunakan framework codeIgniter silahkan konfigurasi dasarnya terlebih dahulu seperti di link dibawah :

konfigurasi dasar CodeIgniter

Ok langsung saja, berikut Controller dengan nama Home.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Home extends CI_Controller {

 function __construct()
 {
    parent::__construct();
  }

 
 public function wilayah()
 {
        $data['onload'] = 'onload="load_pro(0)"';
        $data['title'] = "Selectbox Form Crud";
        $data['active'] = "active";      
        $this->load->view('select',$data);        
 }


    public function wil($d="")
    {
      $kab = $this->mdata->check_where('regencies',array('province_id'=>$d));
      $kec = $this->mdata->check_where('districts',array('regency_id'=>$d));
      $des = $this->mdata->check_where('villages',array('district_id'=>$d));

      
      if($kab)
      {
        echo json_encode($kab);
      }
      else if($kec)
      {
        echo json_encode($kec);
      }
      else if($des)
      {
        echo json_encode($des);
      }
      else if($d==0)
      {
        $data = $this->mdata->view_all('provinces');
        echo json_encode($data);
      }
      else
      {
        show_404();
      }
           
    }



}

Nama Controller Home.php dan function wilayah, will
function Wilayah untuk menapilkan form field wilayah
dan function will nanti akan di jadikan untuk menampilkan data di dropdown lewat ajax berupa data json.
dan untuk View yaitu select.php di code seperti berikut :

 <!doctype html>
<html lang="en">
  <head>
    <title><?php echo $title;?></title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>   

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

    <noscript>
    <style>html{display:none;}</style>
    Sorry, your browser does not support JavaScript!
    </noscript>


  </head>
 <body <?php if(isset($onload)) {echo $onload;}?>>

  <nav class="navbar navbar-expand-sm bg-light mb-5">  
    <ul class="nav navbar-nav">
      <li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>home/content">Data</a></li>
      <li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>home/summer">WYSIWYG Summernote</a></li>    
      <li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>home/page">Pagination</a></li>     
      <li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>home/crop">Cropper</a></li> 
      <li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>home/label">Label</a></li> 
      <li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>home/wilayah">Selectbox</a></li>            
    </ul>
</nav>

   <div class="container">
  <div class="row">


    <div class="col-sm-4"></div>
    <div class="col-sm-4">
    <h3>Select Data</h3><hr/>

  <?php echo form_open('home', 'id="1mydata" '); ?>



<div class="form-group">
  <select class="form-control box" id="pro">
    <option>Pilih Provinsi</option>
  </select>
</div>

<div class="form-group">
  <select class="form-control box" id="kab">
    <option>Pilih Kabupaten</option>
  </select>
</div>


<div class="form-group">
  <select class="form-control box" id="kec">
    <option>Pilih Kecamatan</option>
  </select>
</div>


<div class="form-group">
  <select class="form-control box" id="des">
    <option>Pilih Desa</option>
  </select>
</div>



  <button type="submit" class="btn btn-primary">Save</button>
</form>

    </div>
    <div class="col-sm-4"></div>

  </div>
</div>


  <!-- Javascripts-->
   <script type="text/javascript">

      function load_pro(id,op) {
      
      if(op)
      {
         var $op = op;
      } 
      else 
      {
         var $op = $("#pro"); 
      }      
    

      $.getJSON("wil/"+id, function(data){      
        $.each(data, function(i,field){  
        

           $op.append('<option value="'+field.id+'">'+field.name+'</option>'); 

        });
        
      });
  }

    $(document).ready(function(){    
       $('.box').select2();

         $("#pro").on("change", function(e){
         $('#kab option:gt(0)').remove();
          var op = $("#kab");
          e.preventDefault();
          var id = $('option:selected', this).val();  
          load_pro(id,op);
      });

         $("#kab").on("change", function(e){
         $('#kec option:gt(0)').remove();
          var op = $("#kec");
          e.preventDefault();
          var id = $('option:selected', this).val();  
          load_pro(id,op);
      });



         $("#kec").on("change", function(e){
         $('#des option:gt(0)').remove();
          var op = $("#des");
          e.preventDefault();
          var id = $('option:selected', this).val();  
          load_pro(id,op);
      });


  });
   </script>
  </body>
</html>

Pada bagian View ini select.php sudah include semua proses dan file coding ajax di jadiin satu tidak terpisah,
Silahkan Coba run maka akan di hasilkan seperti gambar di atas.
untuk demo video di sini
dan untuk demo web yaitu seperti berikut :
Dropdown Search, select box, combo box ajax CodeIgniter
Dan untuk download file di link dibawah,
downlod Dropdown Search, select box, combo box ajax CodeIgniter
Terima kasih sudah berkunjung , semoga membantu... jika ada pertanyaan silahkan tinggalkan di kolom komentar
Happy Coding

FFA-Note