Tutorial CodeIgniter : Membuat AutoComplete Sederhana Dengan CodeIgniter + jQuery

Liburan kali ini, keinginan saya untuk bermalas-malasan sudah tercapai. Diawali dengan tidur jam 6 pagi, dan bangun jam 3 sore. Alhasil, badan rasanya pegal-pegal semua. Bukan tanpa alasan saya tidur jam 6 pagi, ini dikarenakan tadi malam saya sedang asik-asiknya membuat sebuah sistem pencarian dengan metode AutoComplete. “Nah lho, apaan tuh AutoComplete..???”. AutoComplete menurut versi saya adalah sebuah metode yang menampilkan perkiraan hasil pencarian dari sebuah kata yang dicari. Contohnya yang sering kita lihat dan sering kita pakai adalah sistem pencarian yang terdapat pada Facebook, dimana ketika kita mencoba mengetikkan sebuah kata, maka akan muncul hasil pencarian yang berhubungan dengan kata yang kita ketikkan tersebut. AutoComplete ini sangat membantu pengguna, karena cukup dengan mengetikkan beberapa huruf, maka muncullah beberapa perkiraan hasil pencarian. Pengguna tidak perlu mengetikkan semua kata, sehingga pengguna sangat dimanjakan dengan AutoComplete ini (pengalaman pribadi). Pada postingan kali ini, saya akan mencoba menjelaskan sedikit cara pembuatan AutoComplete sederhana dengan CodeIgniter dan jQuery. Cekidot gan..!!!

1. Seperti biasa, siapkan file-file framework CodeIgniter di direktori htdocs komputer masing-masing. Atur konfigurasi pada file config.php dan database.php. Disini saya menggunakan sebuah file Controller dengan kode penyusun seperti di bawah ini :

	function index()
	{
		$this->load->view('auto/home');
	}
	function tampil()
	{
		$nama = $this->input->post('kirimNama');
		$data['hasil_semua']=$this->dosen_model->tampil_dosen_semua($nama);
		$data['hasil_limit']=$this->dosen_model->tampil_dosen_limit($nama);
		if($nama!="")
		{
			echo '<ul>';
				foreach($data['hasil_limit']->result() as $result)
				{
			 		echo '<li onClick="pilih(\''.$result->nama_dosen.'\');">
					<img src="'.base_url().'images/orang.jpg" style="padding-right:10px; float:left;">
					<b>'.$result->nama_dosen.'</b><br>NIDN : '.$result->NIDN.'</li>';
				}
				echo '<li id="total">
				<a href="'.base_url().'index.php/autocomplete/detail/'.$nama.'" class="thickbox">
				Terdapat <b>'.$data['hasil_semua']->num_rows().'</b> hasil pencarian dengan kata "<b>'.$nama.'</b>"</a></li>';
			echo '</ul>';
		}
		else
		{
			echo "error";
		}
	}
	function detail()
	{
		$nama = $this->uri->segment(3);
		$data['hasil_semua']=$this->dosen_model->tampil_dosen_semua($nama);
		echo '<ul>';
		foreach($data['hasil_semua']->result() as $result)
			{
	         		echo '<li onClick="pilih(\''.$result->nama_dosen.'\');">
				<img src="'.base_url().'images/orang.jpg" style="padding-right:10px; float:left;">
				<b>'.$result->nama_dosen.'</b><br>NIDN : '.$result->NIDN.'</li>';
			}
		echo '</ul>';
	}

2. Kita lanjutkan dengan membuat sebuah model untuk menampung query database. Saya menggunakan sebuah tabel yang berisi nama-nama dosen di kampus saya (dosen-dosen numpang ngeksis di blog saya *royaltinya dong pak*). Query-nya sangat sederhana, yaitu hanya menampilkan data yang mirip dengan kata yang diinputkan dari textbox.

	function tampil_dosen_semua($nama)
	{
		$q = $this->db->query("select * from tbl_nama_dosen where nama_dosen like '%$nama%'");
		return $q;
	}
	function tampil_dosen_limit($nama)
	{
		$q = $this->db->query("select * from tbl_nama_dosen where nama_dosen like '%$nama%' LIMIT 8");
		return $q;
	}

3. Dan yang terakhir, kita akan membuat sebuah view dengan nama home.php. Karena AutoComplete ini menggunakan AJAX dalam pertukaran komunikasi datanya, maka dari itu saya menggunakan jQuery sebagai framework javascript yang sudah menyediakan library AJAX yang handal.

<script type="text/javascript" src="<?php echo base_url(); ?>asset/js/jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
	$(function() {
		$('#loading').ajaxStart(function(){
			$(this).fadeIn();
		}).ajaxStop(function(){
			$(this).fadeOut();
		});
	});

	function cariDosen(namaDosen) {
		if(namaDosen.length == 0) {
			$('#hasilPencarian').hide();
		} else {
			$.post("<?php echo base_url(); ?>index.php/autocomplete/tampil", {kirimNama: ""+namaDosen+""}, function(data){
				if(data.length >0) {
					$('#hasilPencarian').fadeIn();
					$('#dataPencarian').html(data);
				}
			});
		}
	}

	function pilih(thisValue) {
		$('#namaDosen').val(thisValue);
		setTimeout("$('#hasilPencarian').fadeOut();", 100);
	}
</script>

4. Jangan lupa untuk menambahkan sebuah form beserta textbox untuk menginputkan kata yang akan dicari oleh pengguna :

	<div>
		<div id="loading" style="display:none"><img src="<?php echo base_url(); ?>images/loading.gif" width="20px">
		<br>Memuat Data dari Database...</div>
		<form>
			<div style="width:400px; margin:0px auto;">
				<input type="text" size="30" id="namaDosen" onkeyup="cariDosen(this.value);" onblur="pilih();"
				value="Pencarian...." onfocus="if(this.value=='Pencarian....') this.value='';" />
			</div>

			<div class="kotakHasil" id="hasilPencarian" style="display: none;">
				<div class="daftarPencarian" id="dataPencarian">

				</div>
			</div>
		</form>
	</div>

5. Kira-Kira kode selengkapnya seperti di bawah ini :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo AutoComplete Dengan CodeIgniter dan jQuery</title>

<script type="text/javascript" src="<?php echo base_url(); ?>asset/js/jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
	$(function() {
		$('#loading').ajaxStart(function(){
			$(this).fadeIn();
		}).ajaxStop(function(){
			$(this).fadeOut();
		});
	});

	function cariDosen(namaDosen) {
		if(namaDosen.length == 0) {
			$('#hasilPencarian').hide();
		} else {
			$.post("<?php echo base_url(); ?>index.php/autocomplete/tampil", {kirimNama: ""+namaDosen+""}, function(data){
				if(data.length >0) {
					$('#hasilPencarian').fadeIn();
					$('#dataPencarian').html(data);
				}
			});
		}
	}

	function pilih(thisValue) {
		$('#namaDosen').val(thisValue);
		setTimeout("$('#hasilPencarian').fadeOut();", 100);
	}
</script>

<style type="text/css">
	body {
		font-family: Arial;
		font-size: 11px;
		color: #000;
		margin: 0px auto;
		padding :0px;
	}

	.kotakHasil {
		margin: 0px auto;
		padding :0px;
		background-color: #fff;
		border : 1px solid #666;
		width : 400px;
	}

	.daftarPencarian {
		margin: 0px;
		padding: 0px;
	}

	.daftarPencarian ul {
		margin:0px;
		padding: 0px;
	}

	.daftarPencarian li {
		margin:0px;
		padding: 5px;
		cursor: pointer;
		list-style : none;
	}

	.daftarPencarian li:hover {
		background-color: #659CD8;
	}
	#namaDosen{
		padding : 8px;
		background-color: #f3f3f3;
		border : 1px solid #666;
		width:380px;
	}
	#total{
		background-color:#f3f3f3;
		padding:10px;
		text-align:center;
	}
	#loading{
		background-color:#f3f3f3;
		padding:5px;
		text-align:center;
	}
	a{
		text-decoration:none;
		color:#000;
	}
	a:hover{
		text-decoration:underline;
		color:#000;
	}
</style>

</head>

<body>

	<div>
		<div id="loading" style="display:none"><img src="<?php echo base_url(); ?>images/loading.gif" width="20px">
		<br>Memuat Data dari Database...</div>
		<form>
			<div style="width:400px; margin:0px auto;">
				<input type="text" size="30" id="namaDosen" onkeyup="cariDosen(this.value);" onblur="pilih();"
				value="Pencarian...." onfocus="if(this.value=='Pencarian....') this.value='';" />
			</div>

			<div class="kotakHasil" id="hasilPencarian" style="display: none;">
				<div class="daftarPencarian" id="dataPencarian">

				</div>
			</div>
		</form>
	</div>

</body>
</html>

Penasaran bagaimana hasil akhirnya???. Silahkan liat versi demo-nya pada link yang sudah saya sematkan pada akhir postingan ini. Source kode akhirnya juga saya sediakan link download-nya, sehingga bisa dipelajari oleh rekan-rekan yang tertarik dengan metode AutoComplete ini. OK deh, semoga sedikit tutorial ini bisa membantu dan menambah wawasan rekan-rekan.

Happy Blogging and Keep Coding

Cheerrrsss….!!!!

[to_like]Download Aplikasi[/to_like]

9 comments

    • Gede Lumbung Post authorReply

      hehe, yaw emang mas brow…
      gak punya duit utk perpanjang, monggo yg mau bermurah hati menyumbangkan sedikit donasi untuk kelangsungan hosting tempat saya masang file-file demonya… 😀

  1. cahyo Reply

    nice tutorial.. walau sempat error undifined property, tapi sudah teratasi , sekarang tingga mencari KodeCust untuk menyimpan ke tabel lain. terima kasih

  2. Fadli Reply

    Mas Gede…
    saya terapkan autocomplete di simpeg kok gak bisa ya…
    apa ada pengaturan atau setting di config nya.?

    Trims…