Hallo sahabat Dumenity berjumpa lagi dalam tutorial kursuswebprogramming, pada tutorial kali ini kita akan belajar tentang Bootstrap Autocomplete dengan Load Data Dinamis menggunakan PHP Ajax. Dalam tutorial ini, kita akan melihat cara memuat data secara dinamis untuk daftar saran autocomplete, field input Bootstrap Typeahead. Saya menggunakan jQuery AJAX untuk memanggil skrip PHP MySQL untuk membaca data dari database dan autocomplete secara dinamis. Data yang dimuat akan dikembalikan ke sumber script Typeahead untuk mencantumkan saran autocomplete.

Dalam contoh ini, kita akan menyimpan negara-negara dalam tabel database, bukan array Javascript. Sumber dari fungsi typeahead dibaca dan didapat dari database dengan menggunakan jQuery AJAX. Saya menggunakan AJAX untuk menjalankan skrip PHP dengan meneruskan input field Typeahead sebagai parameter kueri untuk memproses SELECT untuk mendapatkan data untuk saran autocomplete.

jQuery AJAX Callback ke Sumber Supply Typeeadead

Skrip jQuery berikut digunakan untuk menginisialisasi fungsi Bootstrap Typeahead untuk menerapkan autocomplete untuk bidang input. Saat mengetik data ke kolom input, nilai dikirim ke skrip PHP sebagai parameter kueri menggunakan metode JQuery AJAX POST. Metode ini menerima respons database dalam format JSON dan digunakan sebagai sumber untuk menampilkan saran pelengkapan otomatis.

Berikut CSS untuk HTML di atas,

 

Data Dinamis menggunakan database

Skrip PHP berikut menerima input Typeahead sebagai parameter permintaan SELECT. Ini akan terikat ke pernyataan kueri untuk mendapatkan nama negara terkait yang dimulai dengan string kueri. Data ini akan dikodekan dalam format JSON dan kembali ke atribut sumber Typehead.

Screenshot berikut hasil dari Bootstrap Autocomplete dengan Load Data Dinamis menggunakan PHP Ajax,

Bootstrap Autocomplete dengan Load Data Dinamis menggunakan PHP Ajax

Oke itulah tadi pembahasan saya tentang Bootstrap Autocomplete dengan Load Data Dinamis menggunakan PHP Ajax, semoga bermanfaat.