Untuk kali ini saya akan memberikan sebuah tutorial lagi yaitu cara membuat autocomplete saat pengetikan, efek disini bisa kita gunakan ketika kita mengetikan sesuatu akan muncul sebuah bantuan autocomplete dimana sistem itu membantu apakah yang anda maksud kata ini, jadi di bawahnya itu muncul sebuah kata bantuan yang teman-teman bisa pilih jika ada yang cocok teman-teman tinggal click jika tidak teman-teman bisa melanjutkan, oke seperti apa kelanjutannya simak terus ya teman-teman.

mungkin cara membuat autocomplete saat pengetikan teman-teman sering melihat ya ketika kita mencari sesuatu di search engine google dimana ketika kita mengetik pasti muncul website yang terkait dengan kata yang kita ketik, oke lanjut cara ini kita akan gunakan menggunakan sebuah ajax jQuery ya, jadi seperti biasa itulah kerenya si sebuah javascript, oke langsung saja silahkan teman-teman buat templatenya terlebih dahulu, disini saya menggunakan sebuah bootstrap ya, seperti ini

seperti yang teman-teman lihat disini saya akan mencoba membuat sebuah autocomplete dimana ketika user mengetikan sebuah nama buah maka akan muncul autocompletenya, dan proses jQuery dan ajaxnya seperti ini

Ajaxnya seperti biasa tambahan disini ketika teman-teman memilih dari salah satu list autocomplete yang muncul maka kata yang di pilih akan tampil di form keren bukan, dan proses data autocomplete ada di database maka dari itu saya membuat sebuah webservice seperti ini

Proses di webservice kita membuat query like dimana karakter yang kita ketikan akan di cari di data buah yang kita punya seperti ini:

cara membuat autocomplete saat pengetikan

dilihat masih kosong ya, ketika disini saya akan mencari sebuah buah yang namanya duku ya ketika di cari ternyata ada dua autocomplete yang ada di database kita maka kata yang ada dukunya akan muncul

cara membuat autocomplete saat pengetikan

cara membuat autocomplete saat pengetikan

lanjut ketika saya tidak mengetikan dan buah yang di cari tidak ada maka akan muncul sebuah alert

cara membuat autocomplete saat pengetikan

kurang lebih seperti itu ya teman-teman dan saya rasa cukup sampai disini belajar kita tentang cara membuat autocomplete saat pengetikan semoga bermnafaat dan sampai jumpa pada artikel berikutnya terimakasih.

 

WhatsApp chat