Codeigniter – JQueryUI – Autocomplete tutorial

71 Replies

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]
<?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
}
}
}
[/php]

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]
<?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();
}
}
[/php]
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:
[php]
<!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>
[/php]
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 🙂

71 thoughts on “Codeigniter – JQueryUI – Autocomplete tutorial”

  1. 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,

    Reply ↓
  3. 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 ?!

    Reply ↓
  7. 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

    Reply ↓
        1. Eka

          ok saya baca dulu mas,,..

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

          tenkyu

          Reply ↓
  8. BINGUNG

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

    Reply ↓
    1. dudu Post author

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

    2. “+ ui.item.value + “

      3. ”
      );
      },
      [/script]

      Reply ↓
  10. 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,

    Reply ↓
    1. dudu Post author

      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.

      Reply ↓
  12. dudu Post author

    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
    [php]
    function(data){
    if(data.response =="true"){
    add(data.message);
    }
    },
    [/php]]
    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

    Reply ↓
    2. biginner

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

      Reply ↓
  13. rara

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

    padahal semua nya udah sesuai sm tutorial…
    mhon bntuannya

    Reply ↓
  14. septian

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

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

    gmana tuh?

    Reply ↓
      1. septian

        brati gak bisa diganti ya?

        kok saya udah tearpin yang diatas tapi gak bisa2 ya? bahkan image loadingnya gak mau keluar 🙁

        Reply ↓
  15. a.soe

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

    Reply ↓
  16. indra

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

    klo bisa boleh share bagaimana caranya..

    terima kasih 🙂

    Reply ↓
  19. 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 🙂

    Reply ↓
  21. kiki

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

    Reply ↓
  23. 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

    Reply ↓
  24. 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

    Reply ↓
  25. 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 😀

    Reply ↓
  26. 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

    Reply ↓
  32. 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

    Reply ↓
  35. 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

    Reply ↓
  41. 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

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.