Codeigniter – JQueryUI – Autocomplete tutorial

JQueryUI Autocomplete
Kali ini saya mencoba menggabungkan jqueryui dan codeigniter lagi, dan membuat fitur autocomplete / autosuggest. Fungsi autocomplete ini adalah ketika kita mengetikkan karakter pada sebuah input text, maka akan menampilkan daftar item yang memiliki huruf awal sesuai karakter yang kita berikan. Tidak harus huruf awal, ini tergantung query kita dalam mencari item yang diinginkan.

Fitur autocomplete itu sendiri sudah dimiliki oleh plugin jqueryui secara default. Sehingga tidak perlu plugin tambahan lagi. Cukup dipanggil dengan .autocomplete pada elemen yang diinginkan (bisa menggunakan id atau class).

Dalam codeigniter, prinsipnya sama saja. Yang pertama kita buat fungsi index untuk menampilkan form input text. Input text tersebut kita beri id / class tertentu. Kemudian tambahkan fungsi autocomplete pada elemen input tersebut, dengan memanggil controller dan fungsi untuk mecari data. Dalam contoh ini data diambil dari database, dengan memanggil model. Kemudian data disajikan dalam bentuk JSON untuk kemudian ditampilkan dalam list autocomplete. Anda bisa mencoba di halaman demo.

Script controller nya adalah sebagai berikut:

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

class Autocomplete extends Controller {

	function __construct()	{
		parent::Controller();
		$this->load->model('MAutocomplete');
	}
	
	function index(){
		$this->load->view('autocomplete/show');
	}
	
	function lookup(){
		// process posted form data (the requested items like province)
        $keyword = $this->input->post('term');
        $data['response'] = 'false'; //Set default response
        $query = $this->MAutocomplete->lookup($keyword); //Search DB
        if( ! empty($query) )
        {
            $data['response'] = 'true'; //Set response
            $data['message'] = array(); //Create array
            foreach( $query as $row )
            {
                $data['message'][] = array( 
                                        'id'=>$row->propinsi_id,
                                        'value' => $row->propinsi,
                                        ''
                                     );  //Add a row to array
            }
        }
        if('IS_AJAX')
        {
            echo json_encode($data); //echo json string if ajax request
            
        }
        else
        {
            $this->load->view('autocomplete/index',$data); //Load html view of search results
        }
	}
}

function index adalah fungsi untuk menampilkan form input. Sedangkan fungsi lookup digunakan untuk mengambil data dan menyajikan dalam bentuk JSON.

Dalam controller, untuk mengambil data menggunakan model, sehingga script modelnya adalah sebagai berikut :

<?php
class MAutocomplete extends Model{

	function __construct(){
		parent::Model();
	}
	
	function lookup($keyword){
		$this->db->select('*')->from('propinsi');
        $this->db->like('propinsi',$keyword,'after');
        $query = $this->db->get();    
        
        return $query->result();
	}
}

Berisi query active record (bisa juga query sql biasa) untuk mencari data dengan ketentuan LIKE keyword yang diberikan.

Sedangkan viewnya adalah sebagai berikut, sudah dilengkapi dengan script untuk memanggil fungsi autocomplete:

<!DOCTYPE HTML>
<html lang="en-US">
	<head>
	    <title>Codeigniter Autocomplete</title>
	    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />
		<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/	css" media="all" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
	    <meta charset="UTF-8">
	    
	    <style>
	    	/* Autocomplete
			----------------------------------*/
			.ui-autocomplete { position: absolute; cursor: default; }	
			.ui-autocomplete-loading { background: white url('http://jquery-ui.googlecode.com/svn/tags/1.8.2/themes/flick/images/ui-anim_basic_16x16.gif') right center no-repeat; }*/

			/* workarounds */
			* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */

			/* Menu
			----------------------------------*/
			.ui-menu {
				list-style:none;
				padding: 2px;
				margin: 0;
				display:block;
			}
			.ui-menu .ui-menu {
				margin-top: -3px;
			}
			.ui-menu .ui-menu-item {
				margin:0;
				padding: 0;
				zoom: 1;
				float: left;
				clear: left;
				width: 100%;
				font-size:80%;
			}
			.ui-menu .ui-menu-item a {
				text-decoration:none;
				display:block;
				padding:.2em .4em;
				line-height:1.5;
				zoom:1;
			}
			.ui-menu .ui-menu-item a.ui-state-hover,
			.ui-menu .ui-menu-item a.ui-state-active {
				font-weight: normal;
				margin: -1px;
			}
	    </style>
	    
	    <script type="text/javascript">
	    $(this).ready( function() {
    		$("#provinsi_id").autocomplete({
      			minLength: 1,
      			source: 
        		function(req, add){
          			$.ajax({
		        		url: "<?php echo base_url(); ?>index.php/autocomplete/lookup",
		          		dataType: 'json',
		          		type: 'POST',
		          		data: req,
		          		success:    
		            	function(data){
		              		if(data.response =="true"){
		                 		add(data.message);
		              		}
		            	},
              		});
         		},
         	select: 
         		function(event, ui) {
            		$("#result").append(
            			"<li>"+ ui.item.value + "</li>"
            		);           		
         		},		
    		});
	    });
	    </script>
	    
	</head>
	<body>
		Nama Provinsi :
		<?php
			echo form_input('provinsi','','id="provinsi_id"');
		?>
		<ul>
			<div id="result"></div>
		</ul>
	</body>
</html>

Anda bisa mecoba di halaman DEMO, dan script nya bisa dilihat pada github saya 🙂
Semoga berhasil. Jika ada pertanyaan silahkan masukkan pada kolom komentar.
NB: Jangan lupa sesuaikan database yang digunakan. Berikut adalah sql dari tabel propinsi yang saya gunakan 🙂