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 πŸ™‚

  • didik

    mas, sy dah berhasil berkat tutorial mas..
    dari tutorial mas, sy mendapat 2 nilai yg sama yaitu form input yg berisi nama propinsi dan result yg berisi nama propinsi juga..
    gimana caranya biar form input berisi nama propinsi tapi resultnya berisi id (1,2,3,..) dari propinsi tersebut?
    makasi atas bantuannya mas..

    Didik,

  • agung

    mantaps, makasih banyak kang πŸ™‚

  • fureru

    mas, mw tanya nich…
    knp y, kl databaseny pk postgre programny gk bisa jln y??
    pa yg hrs d setting lg selain file database.php ?!

  • qaribun

    kang,klw mw buat autocomplete, bwt database dulu gak

  • sanry

    Kaka bagaiman cara pakainx dah z download scriptx trus cara pakainx gmana mas.. Maklum mas newbe. : ‘ (

    • mungkin perlu belajar jquery dulu kali ya πŸ™‚

  • terima kasih banyak mas dudu,,benar2 membantu ,,^^

    • sama-sama,, senang bisa membantu

  • Eka

    Mas, saya buat Autocomplete dua buah dalam satu view tapi kenapa yang satu jalan yang satu lagi ngga, padahal id textbox-nya berbeda????
    tolong fast reply ya mas Dudu

    thx

    • coba pake jquery.live()

      • Eka

        maksudnya gmn?
        maklum nubi mas, hehehe..

        • Eka

          ok saya baca dulu mas,,..

          baru dapet neh tutorialnya jquery.live()..
          nanti saya tanya kalau ada masalah mas..

          tenkyu

  • BINGUNG

    mas resultnya bisa langsung nampilin dua field gk mas ???
    gimana mas klo pngen bisa langsung nampilin 2 field

    • bisa, ubah bagian
      [script]
      function(event, ui) {
      $(“#result”).append(

    • “+ ui.item.value + “

    • );
      },
      [/script]

  • mamouthan

    ijin nyoba masbro πŸ™‚

  • mulki

    mas, mau tanya tp diluar contoh kasus.

    saya punya menu yg ada 3 sub menu statis dibawahnya.
    saya punya tabel Product yg berisi data yg mau ditampilkan dlm website tp dengan meng-klik submenu tersbt.

    contoh sub menu :
    product A
    product B
    product C

    saat saya klik sub menu product A maka data2 di tabel Product akan menampilkan deskripsi dan type2 dari product A tersbt.

    Mohon pencerahannya & thx

    wassalam,

    • Menu itu list dalam bentuk link kan?

      coba lihat artikel Ini dan Berikut di bagian edit data..

      Intinya sama ko, jadi dipanggil id dari product tersebut pake methode get, trus ditampilkan.

  • beuuhhh keren mas πŸ˜€ ajiib

  • Proses autocompletenya sebenernya pada jqueryui yang udah builtin fungsi autocomplete. Jadi setiap kita mengetikkan karakter pada input text, dia akan menuju ke controller yang mencari data ke database, kemudian ditampilkan / dikirimkan dalam format JSON, dan diubah menjadi view oleh jquery (nanti $data[‘message] di view jadi variabel message)

    Pada view javasccprit

    function(data){
                                if(data.response =="true"){
                                    add(data.message);
                                }
                            },
    

    ]
    Jika response==”true”, didapat pada controller bagian ini ” $data[‘response’] = ‘true’; //Set response” maka dilakukan add(data.message) menjadi dropdown.
    Jika ingin mengirimkan $row->propinsi_id mungkin diakali dengan membuat sebuah form hidden untuk menyimpan id yang terpilih dengan mengeset nilai valuenya dengan ui.item.id

    • vikry

      kalo opsi select: function(event, ui) saya hilangkan, autocompletenya bisa jalan normal

    • biginner

      mungkin bisa kasih contonya ga mas..gmn cara merubah hasil inputan di databasenya jadi propinsi_id…soalnya belajar php+ci…thanks

  • rara

    tutorialnya udah dicoba, cuma kok result nya g muncul2 ya?

    padahal semua nya udah sesuai sm tutorial…
    mhon bntuannya

    • di cek pake firebug

  • septian

    $keyword = $this->input->post(‘term’);

    term itu apa ya bro? variabel dari id viewnya?
    tapi kan variabelnya bernama provinci_id..

    gmana tuh?

    • A request object, with a single property called “term”, which refers to the value currently in the text input. For example, when the user entered “new yo” in a city field, the Autocomplete term will equal “new yo”. Sumber : http://docs.jquery.com/UI/Autocomplete

      • septian

        brati gak bisa diganti ya?

        kok saya udah tearpin yang diatas tapi gak bisa2 ya? bahkan image loadingnya gak mau keluar πŸ™

        • coba di cek pake firebug.

          • septian

            firebug itu untuk apa ya bro?
            maklum newbie CI nih bro.. πŸ™

          • extension di firefox buat develop web

  • a.soe

    mantabs banget tutorialnya…klo tutorial gabungin autocomplete+chain select punya ga gan (mengisi autocomplete dulu..baru muncul chainnya)..thanks

  • indra

    mas mau tanya,,
    klo hasil pencariannya,,
    bisa di masukin
    ke jqgrid ga mas ???

    klo bisa boleh share bagaimana caranya..

    terima kasih πŸ™‚

  • sudah ada gan, cari aja πŸ™‚

  • indra

    makasih mas dudu πŸ™‚

  • indra

    oia mas dudu,,
    klo misalnya pencariannya pengen seperti autocomplete dan hasilnya dimasukan ke jqgrid,, bisa ga mas dudu ??

    klo ada boleh share… bagaimana caranya ????

    terima kasih πŸ™‚

    • wah kayaknya harus banyak bongkar source code deh kalo itu πŸ™‚

  • indra

    susah ya πŸ™

    makasih buat share nya mas.. πŸ™‚

  • kiki

    wah kang ternyata udah ada hehehe maaf saya baru liat tutorial autocompletenya, terima kasih sekali, Anda sangat membantu

  • Mas, misalnya ngambil dari 2 field ato lebih bisa ap g mas???
    misalnya difield A tidak memenuhi maka nglompat ke field B,

    • bisa, tinggal diubah di query database nya

  • revo

    mas gmn cr buat autocompltenya untuk searching jika data seperti berikut:
    id pelaksana
    1 pkl
    2 pak
    3 pkl
    4 pkl

    klo pk tutorialnya mas dudu ketika saya ketik huruf “pk” (list dropdown yg keluar 3 data)..gmn cara buat agar ketika saya ketik huruf “pk” yg keluar didropdownya cm 1 data saja..thanks

    • tambahkan Group By pelaksana pada query nya

  • badut

    mau tanya saya sudah coba auto completenya sy coba dilokal tp loadingnya lama sekali autocompletenya ga muncul yg ada hanya icon loading lama sekali sy ambil skrip yg mas juga sama loadingnya lama kenapa ya???mohon pencerahanya

    • datanya ga ketemu mungkin..

  • ardhi

    mas jika fieldnya : ‘id_kota’ , ‘nama_kota’, ‘propinsi’ ini saya coba autocomplete value adalaha nama kota tapi hasilnya dari inputan muncul nama kota dan propinsi dalam form_input gimana caranya…
    maaf masih belajar mas πŸ˜€

    • kayaknya ga bisa

  • yivie

    mas gmn caranya agar data yang dicari tidak hanya berasal dari satu field saja, bisa dari beberapa field atau bahkan beberapa tabel..mohon pencerahannya..terimakasih

    • tinggal modifikasi SQL nya πŸ™‚

  • adhie

    yg add relasi nya denganΒ source:
    function(req, add){ (parameter ke 2)

  • Pancasona

    Β kalo data yg ditampilkan langsung di input kedatabase gimana?

  • Mas, terima kasih. Sangat membantu sekali.

  • sdk

    kalo autocomplete pake ci 2.0 ke atas bagaimana ya?thanks

    • dwijonarko

      sama aja

  • Eji

    :. Hmm, kalo pengimplementasian autocomplate di prestashop gmn ya??

  • Andriyanto

    terima kasih, sangat membantu, saya ingin bertanya. jika query database ingin lebih spesifikasi lagi dengan menambah parameter bagaimana ya?, function (req, add) saya ingin menambahkan id_prodi: $(‘#id_prodi’).val(), bagaimana pengiriman datanya sehingga di kontroller valuenya dapat dipanggil, $this->input->post(‘id_prodi’); terima kasih

  • Agung Wibudi

    Ijin Coba Mas Broo..,thxs

  • tutorialnya mantap,,cma belum berhasil..mohon bantunanya kk…

    • coba di cek pake firebug direfox atau pake javascript console di chrome

  • ilovemyjourney

    mas, saya masih bingung menggabungkan autocomplete dengan

    http://dudu.web.id/2011/05/insert-multiple-rows-dynamically-with-jquery-php-and-mysql/

    waktu saya gabungin, agak membingunkan, ga bisa bisa

    fitur yang saya inginkan seperti ini

    1. ketika tombol save ditekan, data akan masuk database

    2. ketika tombol add ditekan, akan muncul field baru yang bisa fitur autocomplete
    (kalo menggunakan tanda # kan hanya 1 ‘id/name’ saja yang ber efek, saya coba make ‘class’ juga tidak muncul autocomplete nya)

    3. bagaimana jika kasusnya ‘Update Multiple Rows dynamically with Jquery, PHP and MySQL’ ???

    terima kasih mas πŸ˜€
    pusing saya bikinnya ga nemu-nemu caranya

  • Pak kok blank

    • apanya yang blank? layarnya?

  • Bisa kok pak ? thanks alot πŸ˜€

  • pak kalau data di database tidak ada respon buat data tidak di temukan piye yo pak
    ?

    • ya beri aja response message ny “tidak ditemukan”

  • Pak request donk

    http://dudu.web.id/2011/05/insert-multiple-rows-dynamically-with-jquery-php-and-mysql

    itu dalam Codeigniter dengan fasilitasas AutoComplete atau Auto Suggest πŸ˜€

    Big Thanks πŸ˜€

    • ok next time ya

  • mas sudah saya coba tapi pas saya masukan script di form viewnya gk ada gambar cuman tampak layar putih, mohon panduannya

  • ivon subekti

    gan, mau nanya dong. saya sudah mencoba menggunakan source code ini, tetapi ada error di javascript. berikut error source codenya $(…)autocomplete is not a function, ini kenapa ya gan? tolong pencerahannya dong ! Terima Kasih

    • coba di check apakah jqueryui dan jquery udah ke load dengan banar?