Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini kita  akan membahas tentang jQuery Autocomplete dengan XML Data Source.  Fitur Autocomplete adalah mekanisme typeahead untuk menunjukkan saran masukan kepada pengguna. Ini adalah fitur UI / UX yang umum dalam aplikasi untuk secara intuitif membantu pengguna dengan input. Sebagai contoh, dalam sistem pesan internal, akan nyaman jika bidang To-Address adalah field typeahead. Dengan mengetik di bidang ini, daftar saran autocomplete yang dapat dipilih dapat ditampilkan kepada pengguna. Google menggunakan saran kata kunci Google Penelusuran yang sangat baik ini.

Ini berbeda dengan dropdown bergantung. Sebelumnya, kami telah melihat bagaimana menampilkan saran autocomplete dengan mengumpulkan data dari database menggunakan jQuery AJAX. Saya memanggil fungsi AJAX jQuery untuk memicu permintaan server untuk mendapatkan hasil basis data berdasarkan data yang diketik pada bidang autocomplete. Dalam contoh ini, saya telah menerapkan jQuery UI autocomplete untuk membaca data dari sumber daya file XML. File XML sumber berisi daftar nama negara yang ditetapkan sebagai sumber saat menginisialisasi fungsi pustaka lengkapi-otomatis jQuery UI.
Target HTML Melengkapi Otomatis

Ini adalah halaman arahan di mana bidang input autocomplete ditampilkan. ID bidang ini disebut di pemilih jquery saat menginisialisasi fungsi autocomplete. Dengan mengetik di bidang ini fungsi autocomplete jQuery dipanggil untuk menunjukkan kotak saran kepada pengguna. Kami telah melihat contoh untuk membuat antarmuka pencarian lokasi Google dengan fitur autocomplete.

jQuery Autocomplete untuk Membaca XML melalui AJAX

Pada saat penekanan tombol bidang autocomplete, fungsi autocomplete jQuery dipanggil untuk membaca data XML dan menampilkan kotak saran dengan opsi terkait. Nama file XML ditentukan untuk panggilan AJAX untuk membaca daftar nama negara ke dalam array. Data array ini diatur ke parameter sumber dari fungsi autocomplete. Dari sumber data ini, opsi saran autocomplete ditampilkan.

Sumber Data File XML – Daftar Negara

Ini adalah data file XML yang berisi daftar nama negara.

jQuery Autocomplete dengan Sumber Data XML – Output

Screenshot ini menunjukkan output dari output autocomplete UI jQuery dengan membaca data dari sumber XML melalui AJAX.

jQuery Autocomplete dengan Sumber Data XML