Codeigniter with JQuery UI autocomplete

Malam semuanya,

mau sharing nih soal penggunaan jquery autocomplete di codeigniter.
ok langsung aja, saya akan skip untuk masalah konfigurasi di codeigniter (RTFM).

Tujuan : Menampilkan nama member yang sudah terdaftar di dalam database yang memiliki kemiripan dengan huruf yang di input oleh user.
Bahan :
Xampp
Codeigniter 3
jquery-ui-1.12.1

Database Table : tbl_member
Table Column : member_id,member_name

File Controller : Member.php
File Model : Member_model.php
File View : index.php

langkah 1:

  • buat database (terserah nama apa aja, yang pasti nanti di konfigurasi database harus sama)
  • buat table dengan nama tbl_member , kolom yang dibutuhkan : member_id, member_name
  • insert data kedalam tbl_member

langkah 2:

  • buat file view dengan nama index.php
  • file ini digunakan untuk menampilkan form input yang nantinya akan menampilkan data member ketika user mulai menginput huruf
  • isi dengan script dibawah ini :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
	<title><?php echo $heading; ?></title>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/jquery-ui-1.12.1/jquery-ui.css">
	<script src="<?php echo base_url(); ?>assets/bootstrap/js/jquery-1.9.1.js"></script>
	<script src="<?php echo base_url(); ?>assets/jquery-ui-1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/bootstrap/css/custom.css">        
</head>
<body>
	<div class="container">
		<div id="main">
<?php echo form_open('Member/insert_process','class="col-sm-4 form-horizontal"');?>
<fieldset>
<legend><?php echo $heading; ?></legend>
<div class="control-group">
	<label class="control-label text-large" for="member_name" >Member Name</label>
	<div class="controls">
		<input type="text" class="form-control input-small" id="member_name" name="member_name" value="" placeholder="Member Name"/>
		<input type="text" class="form-control input-small" id="member_id" name="member_id" value=""/>

    </div>
</div>
</fieldset>
</form>
	<script type="text/javascript">
	$(document).ready(function(){

		$("#member_name").autocomplete({
		minLength:0,
		source: "<?php echo base_url('Member/get_autocomplete');?>",
		focus: function(event,ui){
			$['#member_name'].val(ui.item.label);
			return false;
		},
		select: function (event, ui) {
                    $('#member_name').val(ui.item.label); 
                    $('#member_id').val(ui.item.value); 
					return false;
                }
		});
	});
	</script>
	</div></div>
<footer id="footer">
</footer>
    <script src="<?php echo base_url(); ?>assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
  • buat file controller dengan nama Member.php
  • fungsi file ini untuk membuat fungsi get_autocomplete
  • isi dengan script dibawah ini :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Member extends CI_Controller {
	public function __construct(){
		parent::__construct();
		$this->load->model('Member_model');
	}
	public function index(){
		$data['page_title'] = 'Autocomplete';
		$data['heading'] = 'Autocomplete';
		$this->load->view('index',$data);
	}
	public function get_autocomplete(){
		if(isset($_GET['term'])){
			$result = $this->Member_model->search($_GET['term']);
			if(count($result)>0){
				foreach($result as $row){
					$arr_result[] = array(
						'label' => $row->member_name,
						'value' => $row->member_id
					);
				}
				echo json_encode($arr_result);				
			}
		}
	}
}
?>
  • buat file model dengan nama Member_model.php
  • fungsi file ini untuk mengirimkan data member dengan nama fungsi search
  • isi dengan script dibawah ini :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Member_model extends CI_Model{
	public function __construct(){
		parent::__construct();
	}
	public function search($data){
		$this->db->like('member_name',$data);
		$this->db->order_by('member_name','ASC');
		$this->db->limit(10);
		$query = $this->db->get('tbl_member');
		return $query->result();
		$query->free_result();		
	}
}
?> 

dari beberapa file diatas ada 3 hal yang perlu di fokuskan yaitu javascript di index.php, fungsi get_autocomplete di Member.php, fungsi search di Member_model.php

script didalam file index.php dibawah ini berfungsi memanggil metode/fungsi get_autocomplete dari file controller Member.php setelah user melakukan input huruf kemudian menampilkannya dihalaman yang sama setelah menerima data dari file controller.

	<script type="text/javascript">
	$(document).ready(function(){

		$("#member_name").autocomplete({
		minLength:0,
		source: "<?php echo base_url('Member/get_autocomplete');?>",
		focus: function(event,ui){
			$['#member_name'].val(ui.item.label);
			return false;
		},
		select: function (event, ui) {
                    $('#member_name').val(ui.item.label); 
                    $('#member_id').val(ui.item.value); 
					return false;
                }
		});
	});
	</script>

script didalam file Member.php dibawah ini berfungsi memanggil metode/fungsi search dari file model Member_model.php.

	public function get_autocomplete(){
		if(isset($_GET['term'])){
			$result = $this->Member_model->search($_GET['term']);
			if(count($result)>0){
				foreach($result as $row){
					$arr_result[] = array(
						'label' => $row->member_name,
						'value' => $row->member_id
					);
				}
				echo json_encode($arr_result);				
			}
		}
	}

script didalam file Member_model.php dibawah ini berfungsi untuk mengirimkan nama yang mirip dengan data yang dikirimkan oleh file Member.php dengan nama fungsi get_autocomplete

	public function search($data){
		$this->db->like('member_name',$data);
		$this->db->order_by('member_name','ASC');
		$this->db->limit(10);
		$query = $this->db->get('tbl_member');
		return $query->result();
		$query->free_result();		
	}

Mohon maaf jika thread ini kurang jelas dan semoga bermanfaat, sumber thread ini adalah http://mfikri.com/en/blog/codeigniter-autocomplete dan https://jqueryui.com/autocomplete/#custom-data

mantap om, ijin mempelajarinya