Auto Complete Search Menggunakan AJAX

Dengan seiring berkembangnya dalam tampilan website yang hanya statis sekarang berubah menjadi dinamis. Seperti halnya form perncarian seperti google mereka menggunakan autocomplete untuk meudahkan user dalam pencarian.

Dengan Auto complete user dapat melihat hasil dari pencarian tanpa
harus menkan tombol submit . Proses pada background yang melakukan autocomplete pencarian adalah dengan menggunakan Ajax.

Agar terlihat lebih menarik dengan memodifikasi format output hasil pencarian di bawah textbox seperti ini:

Dengan Auto complete user dapat terbantu dalam melakukan pencarian.Untuk membuat auto complete pertama - tampa anda perlu membuat sebuah daabse dangan MYSQL buatlah sebuah tabel dengan nama Pegawai ,dengan struktur table seperti di bawah ini:

CREATE TABLE IF NOT EXISTS `pegawai` ( `NIP` CHAR(5) COLLATE latin1_general_ci NOT NULL, `nama` VARCHAR(30) COLLATE latin1_general_ci NOT NULL, `telepon` VARCHAR(25) COLLATE latin1_general_ci NOT NULL, `umur` INT(2) NOT NULL, `alamat` VARCHAR(100) COLLATE latin1_general_ci NOT NULL, `foto` VARCHAR(100) COLLATE latin1_general_ci NOT NULL, PRIMARY KEY (`NIP`) ) ENGINE=MyISAM ;

Proses pada autocomplete adalah dengan memakai Ajax, jadi anda harus mempersiapkan terlebih dahulu aplikasi server untuk request data dari hasil pencarian di textbox , aplikasi server dapat anda buat dengan bahasa pemrograman PHP seperti script berikut ini :

<?php /* * JQuery autocomplete selalu mengirimkan parameter dengan nama "q" * dimana isi dari "q" adalah inputan dari textbox pada file "index.html" * */ if(isset($_GET['q'])){ mysql_connect('localhost','root','123456'); # koneksi ke database mysql_select_db('test'); # pilih table /* * parameter "q" harus di-filter minimal dengan mysql_escape_string * hanya untuk berjaga-jaga apabila ada inputan dengan karakter khusus * yang error ketika dibaca oleh syntax query MySQL * */ $param = mysql_escape_string($_GET['q']); # lakukan pencarian, tampilkan nama pegawai yang berawalan nilai parameter "q" $query = mysql_query("SELECT * FROM pegawai WHERE nama LIKE '$param%'") or die(mysql_error()); if(mysql_num_rows($query) > 0){ $data = array(); # siapkan variable untuk menampung keseluruhan data while($row = mysql_fetch_object($query)){ $data[] = $row; # input data ke variable array satu per satu baris hasil query } /* * Variable yang mengandung keseluruhan data dari query lalu di konversi * ke JSON dengan fungsi dari PHP5 "json_encode". Hasil keluaran ini akan * diterima dan di proses oleh Ajax di plugin autocomplete pada file "index.html" * */ die(json_encode($data)); /* * lebih jauh tentang implementasi JSON pada aplikasi Ajax dapat anda lihat di artikel di blog saya * http://chandrajatnika.com/2009/02/implementasi-json-pada-aplikasi-ajax/ * */ } } ?>
Hasil dari script di atas akan berformat JASON, agar lebih memudahkan JavaScript dalam melakukan parsing data. Lalu script utama untuk memproses data dari server adalah sebagai berikut:

$(function(){ /* id inputan yang akan melakukan proses autocomplete adalah "suggest" request data autocomplete menuju ke "search.php" */ $('#suggest').autocomplete('search.php', { /* parameter "parse" pada script ini sebenarnya adalah deklarasi ulang dari event parse di library jquery-autocomplete. fungsinya adalah untukmenghandle data yang diterima, karena data yang diterima adalah Ajax maka penanganannya adalah sebagai berikut: */ parse: function(data){ var parsed = []; for (var i=0; i < data.length; i++) { parsed[i] = { data: data[i], value: data[i].nama // nama field yang dicari }; } return parsed; }, /* pada parameter formatItem, kita dapat mengcustom tampilan yang akan muncul ketika ada result dari hasil pencarian autocomplete, kalau formatItem ini tidak di deklarasikan maka hanya akan muncul berupa daftar nama yang terkesan kaku */ formatItem: function(data,i,max){ var str = '<div class="search_content">'; /* tampilkan foto, apabila foto kosong, maka tampilkan default unknown image berapapun lebar foto ini, tingginya disesuaikan menjadi 50px agar tidak menghabiskan tempat */ str += '<img src="'+(data.foto ? data.foto : 'foto/unknown.jpeg')+'" height="50" align="left" />'; /* variable "data" merupakan variable dengan tipe json atau array assosiatif javascript 1 dimensi oleh karena itu dalam mengambil setiap pada "data" hanya dengan "data.nama_property" */ str += '<u>'+data.nama+'</u><br />'+data.alamat+'<br />Telp: '+data.telepon;; str += '</div>'; return str; }, width: 270, // panjang tampilan pencarian autocomplete yang akan muncul di bawah textbox pencarian dataType: 'json' // tipe data yang diterima oleh library ini disetup sebagai JSON } ).result( // fungsi ini akan dipanggil setelah user memilih salah satu result pencarian autocomplete function(event,data,formated){ /* variable "data" merupakan variable dengan tipe json atau array assosiatif javascript 1 dimensi oleh karena itu dalam mengambil setiap pada "data" hanya dengan "data.nama_property" */ $('#pegawaiDetail').show(); // tampilan table detail yang di hide sebelumnya $('#dataNIP').text(data.NIP); $('#dataNama').text(data.nama); $('#dataAlamat').text(data.alamat); $('#dataTelepon').text(data.telepon); $('#dataUmur').text(data.umur); // tampilkan foto pada element <img id="dataFoto">, apabila foto kosong, maka tampilkan default unknown image $('#dataFoto').attr('src',data.foto ? data.foto : 'foto/unknown.jpeg'); } ); });
Pada contoh kali ini, kita menggunakan plugin dari jQuery. Hasil output dari plugin ini masih sangat sederhana, oleh karena itu perlu ada modifikasi hasil output agar terlihat lebih menarik.