Membuat Autocomplete Sederhana menggunakan jQuery

Perkembangan teknologi web saat ini semakin dimudahkan dengan hadirnya Javascript Library yang sangat bermanfaat bagi para Programmer Web, seperti halnya jQuery. jQuery adalah sebuah Javascipt Library yang berjalan untuk penanganan Event dalam HTML. jQuery sedikitnya telah mempermudah interaksi halaman Web yang dulu mungkin hanya DOM (Document Object Model) yang digunakan untuk penanganan event HTML bagi saya.

Dalam jQuery juga tidak hanya basic Library Javascript tetapi ada Library User Interface (jQuery UI) yang di dalam nya terdapat beberapa UI Widget, Interaction, Utilities dan Effects, saya tidak akan menjelaskan satu persatu tentang jQuery UI karena pada bahasan kali ini kita akan membahas jQuery UI Widgets Autocomplete.

jQuery Widgets Autocomplete adalah sebuah fasilitas yang memberikan saran dalam pencarian selagi kita mengetikan apa yang kita cari atau inginkan pada input text HTML seperti Input Text Pencarian Google. awalnya saya pun tidak mengetahui nama dari fasilitas yang memudahkan pencarian ini, tetapi lama kelamaan dengan terus menerus searching di web akhirnya dapat.

Yang di butuhkan dalam eksperimen ini adalah :

• XAMPP atau WAMP atau apa lah yang penting Apache, PHP, Mysql sudah terinstall di OS tapi yang saya gunakan dalam artikel ini adalah XAMPP
• jQuery

Kasus dalam ekpresimen ini adalah kita akan mencari data mahasiswa

yang harus kita siapkan adalah Database Autocomplete yang di dalam nya terdapat Tabel Mahasiswa dengan menggunakan Phpmyadmin.

setelah itu buatlah tabel Mahasiswa dengan field NRP Integer(11), Nama Varchar(40) sehinngga Tabel data mahasiswa nya akan tampak seperti gambar dibawah.

Gambar 1. Tabel Mahasiswa

setelah Database siap, selanjutnya kita siapkan file index.html, kode HTML nya seperti di bawah,

 


Nama  :  

setelah itu kita siapkan file PHP untuk menangani request dari halaman index diatas, berikut kode file PHP nya,

Ok, aplikasi autocomplete sederhana telah selesai, untuk kode lengkap nya silahkan download di sini.
selamat mencoba, terima kasih