Autocomplete: Memberi Sugesti Saat User Input Data

Pernahkah Anda memperhatikan saat Anda mencari sesuatu dengan google, google akan memberi sugesti ketika Anda mulai mengetik kata kunci. Misalkan Anda ingin mencari “tutorial php”, saat Anda mulai mengetik kata “tutorial” google akan memberi sugesti di bawah inputbox seperti tutorial photoshop, tutorial window 8.


sugesti-google.png.
Hal di atas sering disebut dengan autocomplete. Tutorial ini akan menjelaskan cara membuat autocomplete atau memberi sugesti pada user menggunakanjQuery UI Autocomplete.
Di sangkep banyak yang bertanya seperti:

Quote:
Bagaimana caranya menampilkan nama produk setelah user mengetik kode product

Tutorial ini akan mengambil kasus tersebut. Misalkan ada sebuah tabel produk seperti:

Kolom Tipe Data
id integer (auto increment, primary key)
kode varchar(50)
name varchar(255)

Pada tutorial ini diasumsikan Anda memiliki pengetahuan dasar tentang jQuery.
Pertama silahkan download jQuery ui di http://jqueryui.com/. Kemudian buatlah file get_product.php di bawah.

  1. <?php
  2. mysql_connect(“localhost”,“root”,“blah”);
  3. mysql_select_db(“test”);
  4. $term = $_GET[‘term’];
  5. $query = mysql_query(“select * from produk where kode like ‘%”.$term.“%’”);
  6. $json = array();
  7. while($produk = mysql_fetch_array($query)){
  8. $json[] = array(
  9. ‘label’ => $produk[‘kode’].‘ – ‘.$produk[‘nama’], // text sugesti saat user mengetik di input box
  10. ‘value’ => $produk[‘kode’], // nilai yang akan dimasukkan diinputbox saat user memilih salah satu sugesti
  11. ‘nama’ => $produk[‘nama’]
  12. );
  13. }
  14. header(“Content-Type: text/json”);
  15. echo json_encode($json);

Kode php sederhana di atas untuk membentuk json sesuai dengan aturan dari jQuery UI autocomplete. Kemudian kita akan membuat sebuah form html seperti gambar.
form-autocomplete.png
Buatlah file autocomplete.php di bawah.

  1. <html>
  2. <head>
  3. <title>Tutorial Autocomplete</title>
  4. <script type=“text/javascript” src=“jquery-ui/js/jquery-1.9.0.js”></script>
  5. <script type=“text/javascript” src=“jquery-ui/js/jquery-ui-1.10.0.custom.min.js”></script>
  6. <link type=“text/css” rel=“stylesheet” href=“jquery-ui/css/smoothness/jquery-ui-1.10.0.custom.min.css”/>
  7. </head>
  8. <body>
  9. <form method=“post” action=“”>
  10. Kode: <input type=“text” id=“kode” name=“kode”/> Name: <span id=“nama-produk”></span>
  11. <br/><input type=“submit” value=“submit”/>
  12. </form>
  13. <script type=“text/javascript”>
  14. $(document).ready(function(){
  15. $(“#kode”).autocomplete({
  16. minLength:2,
  17. source:’get_product.php’,
  18. select:function(event, ui){
  19. $(‘#nama-produk’).html(ui.item.nama);
  20. }
  21. });
  22. });
  23. </script>
  24. </body>
  25. </html>

Pada baris ke 6-8 untuk menambahkan jquery dan jquery ui. Baris 11-14 untuk membuat form berisi sebuah inputbox dengan id=”kode” dan sebuah dengan id=”nama-produk” untuk menampilkan nama produk setelah user memilih salah satu kode produk (sugesti). Kemudian pada baris 15-25 adalah kode untuk membuat autocomplete dengan opsi minLength:2 (sugesti akan muncul setelah user mengetik 2 huruf), source:’get_product.php’ (source/sumber data untuk sugesti berupa url, file get_product.php yang dibuat sebelumnya), dan select untuk menampilkan nama produk setelah user memilih salah satu kode produk.
opsi opsi lain jquery autocomplete bisa di pelajari di http://api.jqueryui.com/autocomplete/.
Selamat mencoba.
Sumber : http://www.myphptutorials.com

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

w

Connecting to %s