Form Pencarian Autocomplete dari Database dengan Codeigniter

Dalam sebuah kasus pembuatan aplikasi website, adakalanya kita membutuhkan form pencarian. Sama halnya yang sedang saya butuhkan saat itu. Yaitu membuat form pencarian otomatis, yang mana ketika kita ketik beberapa huruf di form tersebut, maka akan muncul related word di bawah form pencarian tersebut. Yang mana related word  itu muncul dari data-data yang kita miliki di dalam database. Untuk lebih jelasnya, dapat dilihat gambar disamping. ketika saya mengetik "set", maka dibawahnya akan muncul kata-kata yang berkaitan dari database. (kebetulan saat saya membuat ini, isi database saya masih dari duplicate row sehingga banyak data yang sama.) 

It's OK.  

Selanjutnya, form ini berlaku untuk framework Codeigniter. Ya, framework yang saya gunakan dalam membuat aplikasi website. Bagi yang menggunakan framework lain dapat menyesuaikan. here we go....

View

Pertama yang perlu disiapkan adalah Jquery. Karena Jequery ini merupakan fasilitas yang dapat membantu kita dalam membuat autocomplete dari database ini. Dibawah ini adalah code javascrip yang harus kita simpan di header.

<!-- Auto Complete Search  -->
<link href="<?php echo base_url();?>assets/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo base_url();?>assets/jquery.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/jquery-ui.js"></script>
<style>
  .ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
  }
   .ui-autocomplete {
    height: 100px;
  }
  </style>

<script type="text/javascript">
$(document).ready(function(){
$('#nama_pekerja').autocomplete(
{
source : "<?php echo site_url('kel_assesment/search_pekerja/?');?>" }
);
});
</script>
<!--End Autocomplete Search  -->

Ini adalah jquery dan javascript yang kita buthkan. Untuk file javascriptnya dapat di unduh dari link yang saya sediakan di bawah penjelasan ini. Yang perlu diperhatikan adalah #nama_pekerja pada kode javascript. #nama_pekerja ini mengacu pada id form input yang kita buat. sedangkan source adalah function dalam controller kita untuk pencarian pekerja.

<input type="text"  name="nama_pekerja" id="nama_pekerja" required>

Pada form input diatas, saya membaut id nya nama pekerja, sehingga pada javascript nya, saya tulis juga #nama_pekerja.

Controller

Selanjutnya kita buat function pada controller. jika dilihat dari javascript, nama controller saya adalah "Kel_assesment" , sedangkan nama fuction nya adalah "search_pekerja".

public function search_pekerja(){
if (isset($_GET['term'])) {
$result = $this->employee_model->search_pekerja($_GET['term']);
if (count($result) > 0) {
foreach ($result as $pr)
$arr_result[] = $pr->employe_name;
echo json_encode($arr_result);
}
}
}

Yang perlu saya jelaskan adalah kode "employe_name". employe_name disini adalah nama field atau kolom yang ada pada tabel database saya. Karena saya ingin membuat pencarian autocomplete dari nama pekerja, maka saya panggil field atau kolom employe_name ini. Yang mana saya lakukan dengan memanggil function search_pekerja pada model employee_model. (nama function di Controller dengan nama function di Model tidak harus sama).

Model

Pada bagian model, kita butuh function untuk pencarian dari database. sehingga kita buat function sebagai berikut :

function search_pekerja($nama_pekerja){
$this->db->like('employe_name', $nama_pekerja , 'both');
$this->db->order_by('employe_name', 'ASC');
return $this->db->get('employee')->result();
}

Disini saya membuat function pencarian nama pekerja dengan klausa like dan di urutkan berdasarkan employe_name secara Ascending. Arti dari kode i atas jika diketik dengan  query mySQL kurang lebih seperti ini.

SELECT * FROM 'employee' WHERE 'employe_name' LIKE '%$nama_pekerja%' ORDER BY 'employe_name' ASC;

That's all... selamat mencoba form pencarian autocomplete ini di aplikasi web Anda yang menggunakan Codeigniter sebagai frameworknya.

Link File Jquery :

Download Autocomplete Jquery