Pada kesempatan kali ini saya akan memberikan tips dan trik tentang Kolaborasi Auto Complete Jquery UI dan PHP, dimana sebuah form search kita berikan Auto Complete dan kita gabungkan dengan database menggunakan PHP. Untuk teman-teman bisa lihat tutorial Dumet School tentang Cara Membuat Auto Complete Seacrh Dengan Jquery UI, dari tutorial tersebut masih menggunakan extensi .html agar bisa terkoneksi dengan database teman-teman rubah dengan extensi .php. Kalian bisa copy script di bawah ini

Kemudian buat folder di dalam htdocs dan save file dengan nama index.php, jika sudah lalu panggil pada url nya

Kolaborasi Auto Complete Jquery UI dan PHP

Langkah berikutnya kita implementasikan Kolaborasi Auto Complete Jquery UI dan PHP, teman-teman buat database nya terlebih dahulu, disini saya membuat database dengan nama search dan nama table nya pencarian

Kolaborasi Auto Complete Jquery UI dan PHP

Jika sudah, klik insert lalu isi beberapa data nya ke dalam table. Disini saya berikan nama-nama script, jika sudah klik tombol Go sampai jadi seperti ini

Kolaborasi Auto Complete Jquery UI dan PHP

Kemudian kita buat config nya untuk menghubungkan database dengan file index.php, copy script di bawah ini

Save dengan nama connect.php, kemudian kita rubah file index.php nya seperti script di bawah ini

Yang kita rubah adalah pemanggilan nama dari database yang kita kolaborasikan dengan Jquery UI

Kolaborasi Auto Complete Jquery UI dan PHP

Menjadi

Kolaborasi Auto Complete Jquery UI dan PHP

Jika sudah, save dan refresh pada browser nya. Maka form search berhasil diberikan fungsi Auto Complete yang kita gabungkan dengan PHP, ketika kita ketikkan text pada form search maka otomatis akan menyamakan yang ada pada database yang tadi kita buat. Sangat mudah bukan, oke cukup sekian dulu pada artikel ini tentang Kolaborasi Auto Complete Jquery UI dan PHP

Semoga bermanfaat, terimakasih dan sampai jumpa.

Indahnya berbagi ilmu 🙂