Bootstrap Autocomplete dengan Load Data Dinamis menggunakan PHP Ajax

Posted on

Hallo rekan rekan Dumenity berjumpa lagi pada tutorial kursuswebprogramming, di panduan kali ini kita akan belajar mengenai Bootstrap Autocomplete dengan Load Data Dinamis menggunakan PHP Ajax. Pada panduan ini, kita akan melihat cara mengandung data secara dinamis bagi daftar saran autocomplete, field input Bootstrap Typeahead. Saya menggunakan jQuery AJAX bagi memanggil skrip PHP MySQL bagi membaca data dari database dan autocomplete secara dinamis. Data yang dimuat akan dikembalikan ke sumber script Typeahead bagi mencantumkan saran autocomplete.

Pada contoh ini, kita akan menyimpan negara-negara pada tabel database, bukan array Javascript. Sumber dari kegunaan typeahead dibaca dan didapat dari database dengan menggunakan jQuery AJAX. Saya menggunakan AJAX bagi menjalankan skrip PHP dengan meneruskan input field Typeahead selaku parameter kueri bagi memproses SELECT bagi memperoleh data bagi saran autocomplete.

jQuery AJAX Callback ke Sumber Supply Typeeadead

Skrip jQuery berikut digunakan bagi menginisialisasi kegunaan Bootstrap Typeahead bagi mengaplikasikan autocomplete bagi bidang input. Ketika mengetik data ke kolom input, nilai dikirim ke skrip PHP selaku parameter kueri menggunakan sistem JQuery AJAX POST. Sistem ini menerima respons database pada format JSON dan digunakan selaku sumber bagi menampilkan saran pelengkapan otomatis.

Berikut CSS bagi HTML di atas,