Autocomplete di Codeigniter menggunakan JQuery

Posted on by ghantexs16

Autocomplete atau juga dikenal dengan sebutan AutoSuggest adalah fitur tambahan dalam suatu form input untuk menampilkan data – data yang sesuai dengan apa yang diketikkan user pada form. Contohnya adalah form pencarian google, dimana ketika kita menuliskan satu kalimat yang belum utuh, maka secara otomatis akan tersedia daftar data – data yang menyambungkan kalimat tersebut secara utuh, sehingga anda tidak perlu lagi menuliskan semua kata yang ingin anda cari.

Langung saja, saya punya suatu tabel mahasiswa seperti berikut :

Tampilan pada Form :

kurang lebih nanti hasilnya akan seperti diatas, hal pertama yang harus kita lakukan adalah mendownload Jquery di http://jquery.com/download/ dan plugin JQuery Autocomplete di http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ kemdian extract file tersebut di folder root Codeigniter dalam folder Jquery.

Pembuatan View :

buatlah sebuah view dengan nama mahasiswa.php dan simpan di folder application/view

<!DOCTYPE html>
<html>
<head>
<title>Kartu Rancangan Studi</title>
<script src=”<?php echo base_url();?>jquery/jquery.js”></script>
<script src=”<?php echo base_url();?>jquery/jquery.autocomplete.js”></script>
<link rel=”stylesheet” href=”<?php echo base_url();?>jquery/jquery.autocomplete.css”>
<script>
$(document).ready(function(){
$(“#nim”).autocomplete(“<?php echo site_url(‘akademik/cariNim’);?>”,
{
width:150
});
$(“#nim”).result(function(even,data,formatted){
$(“#nama”).html(“<p>Nim yang anda pilih : “+formatted+”</p>”);
});
});
</script>
</head>
<body>
<p>Nim : <input type=”text” name=”nim” id=”nim”></p><span id=”nama”></span>
</body>
</html>

Pembuatan Controller :

buatlah sebuah controller dengan nama akademik.php dan simpan di folder application/controller

<?php
class Akademik extends ci_controller
{
function __construct()
{
parent::__construct();
$this->load->model(‘akademik_model’);
}
function index()
{
$this->load->view(‘mahasiswa’);
}

function cariNim()
{
$nim=$this->input->get(‘nim’);
$query=$this->akademik_model->cariNim($nim);
foreach($query->result() as $row)
{
echo “$row->nim \n”;
}
}
}

Pembuatan Model :

buatlah sebuah file model dengan nama akademik_model.php dan simpan di folder application/model

<?php
class Akademik_model extends ci_model
{

function cariNim($nim)
{
$sql=$this->db->query(“select * from mahasiswa where nim LIKE ‘%$nim%'”);
return $sql;
}
}

* Mudah – mudahan artikel ini bermanfaat.

3 thoughts on “Autocomplete di Codeigniter menggunakan JQuery”

  3. misalnya gini gan,
    saya mau menampilkan autocomplete kota
    di setiap kota ada foreign key provinsi

    jadi ketika saya sudah memilih provinsi, maka kota otomatis akan menampilkan kota2 dalam provinsi tersebut.

    nah cara mengirim paramater nya gimana gan,
    sintax ini kan tnpa parameter,
    $(“#nim”).autocomplete(“

    saya ingin mengirimkan parameter id provinsi untuk menfiter kota yang yg di tampilkan
    misal
    provinsiid = 1;
    untuk sent parameternya provinsiid gimana gan ?
    terimakasih

    Reply

Isi Komentar. . .