Tutoral kali ini merupakan lanjutan tutorial AutoComplite, kali ini akan ditambahkan proses pencarian dengan metode JSON.

  1. Langkah pertama buat database barang
  2. Struktur database dan contoh datanya
  3. CREATE TABLE `tbbarang` (
  4.   `kodebarang` char(25) NOT NULL,
  5.   `namabarang` varchar(100) DEFAULT NULL,
  6.   `hargabeli` int(11) DEFAULT NULL,
  7.   `hargajual` int(11) DEFAULT NULL,
  8.   `stokawal` smallint(6) DEFAULT NULL,
  9.   PRIMARY KEY (`kodebarang`)
  10. );
  11. INSERT INTO `tbbarang` VALUES (‘001’, ‘TOP  Kopi’, ‘950’, ‘1000’, ‘1000’);
  12. INSERT INTO `tbbarang` VALUES (‘002’, ‘Pulpy Orange’, ‘4500’, ‘5000’, ’10’);
  13. Langkah kedua buat file barang.php
  14. <html>
  15. <head>
  16. <script type=”text/javascript” src=”jquery-1.4.js”></script>
  17. <script type=’text/javascript’ src=’jquery.autocomplete.js’></script>
  18. <link rel=”stylesheet” type=”text/css” href=”jquery.autocomplete.css” />
  19. <link rel=”stylesheet” href=”main.css” type=”text/css” />
  20. <script type=”text/javascript”>
  21. $().ready(function() {
  22. $(“#barang”).autocomplete(“proses_barang.php”, {
  23.   width: 150
  24.   });
  25. $(“#barang”).result(function(event, data, formatted) {
  26.   var kode = formatted;
  27.   $.ajax({
  28.   type : “POST”,
  29.   data : “kode=”+kode,
  30.   url  : “cari_barang.php”,
  31.   dataType: “json”,
  32.   success: function(data){
  33.     $(“#namabarang”).val(data.namabarang);
  34.     $(“#hargabeli”).val(data.hargabeli);
  35.   }
  36.   });
  37. });
  38. $(“#barang”).keyup(function() {
  39.   var kode = $(‘#barang’).val();
  40.   $.ajax({
  41.   type : “POST”,
  42.   data : “kode=”+kode,
  43.   url  : “cari_barang.php”,
  44.   dataType: “json”,
  45.   success: function(data){
  46.     $(“#namabarang”).val(data.namabarang);
  47.     $(“#hargabeli”).val(data.hargabeli);
  48.   }
  49.   });
  50. });
  51. });
  52. </script>
  53. </head>
  54. <body>
  55.   <div style=”width: 450px;”>
  56.   <div>
  57.   <p>Kode Barang : <input type=”text” id=”barang”></p></div>
  58.   <p>Nama Barang : <input type=”text” id=”namabarang” size=”50″ disabled></p>
  59.   <p>Harga Beli : <input type=”text” id=”hargabeli” size=”15″ align=”right” disabled></p>
  60.   </div>
  61.   </div>
  62. </body>
  63. </html>
  64. Langkah ketiga buat file proses_barang.php
  65. <?php
  66. mysql_connect(“localhost”,”root”,””);
  67. mysql_select_db(“tutorial_jquery”);
  68. $q = strtolower($_GET[“q”]);
  69. if (!$q) return;
  70. $sql = mysql_query(“select kodebarang from tbbarang where kodebarang LIKE ‘%$q%'”);
  71. while($r = mysql_fetch_array($sql)) {
  72. $kode_barang = $r[‘kodebarang’];
  73. echo “$kode_barang \n”;
  74. }
  75. ?>
  76. Langkah keempat buat file cari_barang.php
  77. <?php
  78. mysql_connect(“localhost”,”root”,””);
  79. mysql_select_db(“tutorial_jquery”);
  80. $kode = $_POST[kode];
  81. $sql  = mysql_query(“select * from tbbarang where kodebarang=’$kode'”);
  82. $row = mysql_num_rows($sql);
  83. if($row>0){
  84. $r = mysql_fetch_array($sql);
  85. $data[‘namabarang’] = $r[namabarang];
  86. $data[‘hargabeli’] = $r[hargabeli];
  87. echo json_encode($data);
  88. }else{
  89. $data[‘namabarang’] = ”;
  90. $data[‘hargabeli’] = ”;
  91. echo json_encode($data);
  92. }
  93. ?>

Kode Program Download