Ajax Autocompleter dengan PHP

Tentunya sudah pernah melihat si 'embah Google' khan! google menerapkan ajax auto completer pada textbox pencariannya! misalkan ketika kita mengetikkan kata ajax pada textbox pencarian maka secara otomatis google akan menampilkan kata yang terkait dengan ajax. Nah, kata ajax tutorial, ajax control toolkit, ajax examples,dsb merupakan ajax auto completer!

Selain berfungsi sebagai pembantu atau pelengkap kata yang akan dicari, dapat berfungsi juga untuk meminimalisir terjadi kesalahan penulisan. Ane mencoba akan sharing membuat ajax autocompleter dengan menggunakan bahasa pemrograman PHP (PHP versi 5).

Skenario :

* Suatu ketika universitas 'X' ingin melakukan pencarian mahasiswanya berdasarkan nama lengkapnya! misal. ingin mencari nama 'aditya nursyahbani'. Ketika diketikkan nama tsb dan klik tombol cari hasil pencarianpun muncul mahasiswa dengan nama tsb.

* Misal universitas 'X' tersebut melakukan query pencarian dengan "SELECT x FROM y WHERE x = '$katakunci' " pada aplikasinya. Artinya kita harus mengetikan nama yang lengkap dan benar2 sesuai dengan namanya. Permasalahan: pencarian spesifik, harus mengetikkan nama dengan benar dan tepat jika tidak, pencarian tidak ditemukan.

* Misal universitas 'X' tersebut melakukan query pencarian dengan "SELECT x FROM y WHERE x LIKE '$katakunci%' " pada aplikasinya. Artinya aplikasi mencari berdasarkan kata yang mengandung atau mirip dengan kata kunci dimana '%' dapat digantikan kata atau frasa dari a-z. Permasalahan yang timbul ketika nama yang akan dicari sangat banyak (pasaran, red) misal. 30 org. Mau ga mau harus mengetikkan nama lengkapnya juga! xixixi... ditambah lagi nama org yang mau dicari panjang gilaa... =).

* Ajax Autocompleter solusinya! kita buat ajax autocompleter dengan mengambil data dari database.


Persiapan :

* Webserver (Apache or IIS)

* MySQL

* PHP5. (ane menggunakan paket XAMPP yg sudah termasuk apache,php,MySQL,dll)

* Web browser yang mendukung AJAX. (penulis menggunakan mozilla firefox)

* IDE menggunakan Macromedia Dreamweaver atau apalah sesuka hati


Langkah-Langkahnya :

* Pertama buat databasenya, gunakan phpmyadmin. Caranya jalankan XAMPP-nya, buka web browser (Mozilla Firefox) dan ketikkan http://localhost/phpmyadmin dan create database dengan nama ajax. Kemudian pilih tab menu import dan browse file hasil dumpingan dengan nama ajax.sql yang dapat didownload pada menu download dibawah.

* Langkah selanjutnya, buat folder autocomplete pada root directory atau jika menggunakan XAMPP yang diinstal di drive C, letakkan folder tsb pada 'C:\xampp\htdocs\buat folder autocomplete disini'.

Buat file template dengan nama Index.html, letakkan pada folder autocomplete
Buat file PHP dengan nama Proses.php, letakkan pada folder autocomplete
Finally, Testing aplikasi dengan mengetikkan URL pada web browser : http//localhost/autocomplete .

Download Source Code :

Ajax.sql

jquery-1.2.1.pack.js

upArrow.png

SUMBER