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