Tutorial Codeigniter 3 Make Auto Complete Using Ajax and Database #Part 2

Auto Complete Using Codeigniter

Membuat form auto complete di CodeIgniter dengan library jquery. Di part 2 ini kita hanya menambahkan satu inputan untuk hasil pencarian dan untuk kasus di dalam tutorial ini kita ambil data mahasiswa. Untuk secara lengkapnya bisa di lihat di code berikut.

1. Controller
Buat Sebuah File Di controller dengan nama c_autocomplete.php

  
function get_autocomplete()
  {
    if (isset($_GET['term'])) {
      $result = $this->m_auto->get_prov($_GET['term']);
      if (count($result) > 0) {
        foreach ($result as $row)
        $result_array[] = array(
            'label'=>$row->nim,
            'nama_mahasiswa'=>strtoupper($row->nama)
          );
        echo json_encode($result_array);
      }
    }
  }

2. Model
Tambahkan Function ini di file model dengan nama M_auto.php

  
public function get_prov($title)
{
  $this->db->like('nim', $title, 'BOTH');
  $this->db->order_by('id', 'asc');
  $this->db->limit(10);
  return $this->db->get('tb_mahasiswa')->result();
}

3. View
Terakhir Anda Tambahkan code ini di folder View dengan nama v_autocomplete.php

  
<?php include 'template/header.php'; ?>
<body>

<?php include 'template/nav_header.php'; ?>
  <div class="container">
    <h1 align="center">Auto Komplete</h1>
    <div class="col-md-4" style="margin: 0 auto;">
      <label class="control-label">Nim Mahasiswa</label>
      <input type="text" name="title" id="title" placeholder="Masukan Nim Mahasiswa" class="form-control">
      <label class="control-label">Nama Mahasiswa</label>
      <input type="text" name="nama_mahasiswa" placeholder="Nama Mahasiswa" class="form-control">
    </div>
  </div>
<?php include 'template/mahasiswa_input_modal.php'; ?>
</body>
<?php include 'template/footer.php'; ?>

<script>
  $(document).ready(function()
  {
    $("#title").autocomplete({
      source : "<?php echo site_url('C_autocomplete/get_autocomplete') ?>",

      select: function(event, ui){
        $('[name="title"]').val(ui.item.label);
        $('[name="nama_mahasiswa"]').val(ui.item.nama_mahasiswa);

      }
    });
});
</script>