» » Autocomplete: Memberi Sugesti Saat User Input Data

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:
KolomTipe Data
idinteger (auto increment, primary key)
kodevarchar(50)
namevarchar(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”);
  5. $term = $_GET['term'];
  7. $query = mysql_query(“select * from produk where kode like ‘%”.$term.“%’”);
  8. $json = array();
  9. while($produk = mysql_fetch_array($query)){
  10. $json[] = array(
  11. ‘label’ => $produk['kode'].‘ – ‘.$produk['nama'], // text sugesti saat user mengetik di input box
  12. ‘value’ => $produk['kode'], // nilai yang akan dimasukkan diinputbox saat user memilih salah satu sugesti
  13. ‘nama’ => $produk['nama']
  14. );
  15. }
  16. header(“Content-Type: text/json”);
  17. 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. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Tutorial Autocomplete</title>
  5. <!– tambahkan jquery dan jquery ui –>
  6. <script type=“text/javascript” src=“jquery-ui/js/jquery-1.9.0.js”></script>
  7. <script type=“text/javascript” src=“jquery-ui/js/jquery-ui-1.10.0.custom.min.js”></script>
  8. <link type=“text/css” rel=“stylesheet” href=“jquery-ui/css/smoothness/jquery-ui-1.10.0.custom.min.css”/>
  9. </head>
  10. <body>
  11. <form method=“post” action=“”>
  12. Kode: <input type=“text” id=“kode” name=“kode”/> Name: <span id=“nama-produk”>-</span>
  13. <br/><input type=“submit” value=“submit”/>
  14. </form>
  15. <script type=“text/javascript”>
  16. $(document).ready(function(){
  17. $(“#kode”).autocomplete({
  18. minLength:2,
  19. source:’get_product.php’,
  20. select:function(event, ui){
  21. $(‘#nama-produk’).html(ui.item.nama);
  22. }
  23. });
  24. });
  25. </script>
  26. </body>
  27. </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 <span/> 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

Related Posts :

0 Response to "Autocomplete: Memberi Sugesti Saat User Input Data"

Post a Comment

Subscribe to: Post Comments (Atom)