Jquery Autocomplete dengan Bootstrap 3

Jquery Autocomplete dengan Bootstrap 3

1893
5
SHARE

Pada kesempatan ini harviacode akan mengupas tentang bagaimana menggunakan jquery autocomplete dengan bootstrap 3. Jquery autocomplete merupakan salah satu fitur jquery yang memungkinkan kita membuat input form dengan fitur auto suggest. Jadi seandainya kita mengetikkan ‘ja’ pada input, maka akan muncul saran inputan yang bisa kita ambil dari database, misalnya ‘DKI Jakarta’, ‘Jawa Barat’, atau kata lain yang mengandung suku kata ‘ja’.

autocomplete

Jquery Autocomplete dengan Boostrap 3

Untuk membuatnya sangat lah mudah. Kita hanya memerlukan 2 file yaitu :

  • index.php : untuk menampilkan form
  • search.php : untuk memproses request dari index.php

autocomplete

Berikut ini adalah kode untuk index.php

Pada index.php di atas kita juga menambahkan stylesheet bootstrap 3 agar tampilan lebih menarik.

 

Dan ini adalah kode untuk search.php

 

Oia, lupa databasenya. Bikin juga databasenya ya, ini adalah contoh tabel provinsi yang kita gunakan pada contoh di atas

Sekarang coba jalankan file index.php melalui browser, ketikkan ‘ja’, maka akan muncul saran nama kota yang memiliki suku kata ja.

Demikian, semoga bermanfaat, jangan lupa dilike dan dishare ya, terima kasih telah berkunjung ke harviacode.com

Bagikan artikel ini ya.. terima kasih

5 COMMENTS

    • term itu bawaannya autocomplete nya mas. coba dilihat di console. saat kita mengetik maka akan mengirimkan term sesuai dengan yang kita ketik. nah variabel term itulah yang kita tangkap sebagai parameter pencarian. demikian mas Dian

      • oalah, oke mas sudah bisa.
        mau tanya lagi, kalau kasih pesan “data tidak ada” saat yg dicari tidak ada bagaimana ya mas? makasih

LEAVE A REPLY