Tutorial Penggunaan jQuery Autocomplete

Pernahkah anda menjumpai sebuah textbox pada form yang ketika kita mengetik maka akan muncul saran-saran dibawahnya? jika pernah, itu adalah textbox yang menerapkan jquery autocomplete. Apa itu jquery autocomplete? jquery autocomplete adalah salah satu fungsi jquery yang dapat memberikan saran atau menampilkan list dari apa yang kita cari. Contohnya jika kita akan menginputkan sebuah nama pada sebuah textbox, maka akan muncul secara otomatis saran dari nama yang sudah ada pada database. Perhatikan gambar dibawah ini.

Untuk membuat sebuah textbox yang dilengkapi dengan jquery autocomplete hal yang perlu anda persiapkan adalah sebagai berikut :

1. File jquery.js
2. File jquery.autocomplete.js
3. Database mysql

Pertama-tama kita akan buat terlebih dahulu database kita. Saya akan membuat database dengan nama “tutorial” dan membuat tabel dengan nama “mahasiswa” dimana didalamnya terdapat tiga kolom yaitu ID, NAMA, NILAI.

Setelah membuat databasenya, isilah tabel mahasiswa tersebut dengan beberapa data yang akan kita gunakan sebagai sample. Setelah database siap, kita akan membuat file folder pada htdocs(Jika anda menggunakan XAMPP atau LAMPP) dengan nama folder “autocomplete”. Kemudian letakkan file jquery.js dan file jquery.autocomplete.js pada folder tersebut. Kemudian buatlah file index.php didalam folder tersebut dan isi file tersebut dengan code dibawah ini.

Setelah file index.php selesai dibuat, selanjutnya kita akan membuat file autocomplete.php yang juga terletak didalam satu folder dengan file yang lain. Fungsi file autocomplete.php ini adalah untuk proses pencarian yang hasilnya akan memberi saran pada autocomplete yang akan kita buat nantinya. Isi file tersebut dengan kode dibawah ini.

Sekarang semua proses sudah selesai dilakukan dan dapat anda jalankan dibrowser anda. Untuk mendownload contoh penggunaan jquery autocomplete diatas dapat anda download disini. Jika ada pertanyaan tentang penggunaan jquery autocomplete diatas, silahkan berikan komentar anda dibawah ini.

Tweet

Subscribe to receive free email updates: