Pada kesempatan kali ini saya akan membahas tentang bagaimana cara membuat autocomplete dengan AngularJS. Yang dimaksud autocomplete sendiri merupakan dimana textbox yang nantinya saat ada inputan dari user maka akan muncul sejumlah data yang dicari, dengan maskud adalah menampilkan perkiraan kata yang dimasukkan tanpa memasukan secara keseluruhnya.

Langkah pertama dalam cara membuat autocomplete dengan AngularJS, yaitu sahabat bisa siapkan struktur HTMLnya seperti script berikut:

Pada script diatas saya menggunakan library CDN Bootstrap dan AngularJS.

1-Membuat Autocomplete dengan AngularJS

Disini saya memakai col-md-8 untuk menampilkan contennya, didalamnya menggunakan ng-model untuk memasukan teks , lalu menggunakan tag html <ul> untuk menampung data yang tersimpan dengan menggunakan fungsi ng-model dengan value hidden. serta tag <li> untuk mencetak dengan expression {{}}.

Dan terakhir membuat variabel $scope didalam controllernya dimana ada data dalam array yagn berisikan nama kota, dimana saat kita memasukan nama kota maka akan muncul dan terfilter sesuai kata yang diketikan tanpa harus diketikan secara keseluruhan.

JIka sahabat jalankan pada browser dan mengetikan beberapa huruf maka akan seperti dibawah ni tampilannya:

1-Cara Membuat Autocomplete dengan AngularJS 

Demikian pembahasan artikel kali ini tentang cara membuat autocomplete dengan AngularJS semoga bermanfaat dan menambah ilmu serta pengetahuan sahabat.

Selamat mencoba sampai jumpa kembali dengan pembahasan lainnya.terima kasih.

WhatsApp chat