Minggu, 27 November 2011


Auto Complete Search Menggunakan AJAX


By on 05.15


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:



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 :




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:




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.

Tukang Coding
Judul: Auto Complete Search Menggunakan AJAX
Review oleh: Tukang Coding | Template TreTans 1.0
Update pada: 05.15 | Rating: 4.5

Comment for "Auto Complete Search Menggunakan AJAX"

0 komentar

Posting Komentar