Form AutoComplete dan Pencarian Data

pada tanggal

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
    CREATE TABLE `tbbarang` (
  `kodebarang` char(25) NOT NULL,
  `namabarang` varchar(100) DEFAULT NULL,
  `hargabeli` int(11) DEFAULT NULL,
  `hargajual` int(11) DEFAULT NULL,
  `stokawal` smallint(6) DEFAULT NULL,
  PRIMARY KEY (`kodebarang`)
);

    INSERT INTO `tbbarang` VALUES ('001', 'TOP  Kopi', '950', '1000', '1000');
INSERT INTO `tbbarang` VALUES ('002', 'Pulpy Orange', '4500', '5000', '10');

  2. Langkah kedua buat file barang.php
    3. <html>
<head>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type='text/javascript' src='jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript">
$().ready(function() { 
 $("#barang").autocomplete("proses_barang.php", {
  width: 150
  });

 $("#barang").result(function(event, data, formatted) {
  var kode = formatted;
  $.ajax({
   type : "POST",
   data : "kode="+kode,
   url  : "cari_barang.php",
   dataType: "json",
   success: function(data){
    $("#namabarang").val(data.namabarang);
    $("#hargabeli").val(data.hargabeli);
   }
  });
 });
 $("#barang").keyup(function() {
  var kode = $('#barang').val();
  $.ajax({
   type : "POST",
   data : "kode="+kode,
   url  : "cari_barang.php",
   dataType: "json",
   success: function(data){
    $("#namabarang").val(data.namabarang);
    $("#hargabeli").val(data.hargabeli);
   }
  });
 });
});
</script>
</head>
<body>
  <div class="demo" style="width: 450px;">
  <div>
  <p>Kode Barang : <input type="text" id="barang"></p></div>
  <p>Nama Barang : <input type="text" id="namabarang" size="50" disabled></p>
  <p>Harga Beli : <input type="text" id="hargabeli" size="15" align="right" disabled></p>
  </div>
  </div> 
</body>
</html>

  3. Langkah ketiga buat file proses_barang.php
    4. <?php
mysql_connect("localhost","root","");
mysql_select_db("tutorial_jquery");

$q = strtolower($_GET["q"]);
if (!$q) return;

$sql = mysql_query("select kodebarang from tbbarang where kodebarang LIKE '%$q%'");
while($r = mysql_fetch_array($sql)) {
 $kode_barang = $r['kodebarang'];
 echo "$kode_barang \n";
}
?>
  4. Langkah keempat buat file cari_barang.php
    5. <?php
mysql_connect("localhost","root","");
mysql_select_db("tutorial_jquery");

$kode = $_POST[kode];

$sql  = mysql_query("select * from tbbarang where kodebarang='$kode'");
$row = mysql_num_rows($sql);
if($row>0){
 $r = mysql_fetch_array($sql);
 $data['namabarang'] = $r[namabarang];
 $data['hargabeli'] = $r[hargabeli];
 echo json_encode($data);
}else{
 $data['namabarang'] = '';
 $data['hargabeli'] = '';
 echo json_encode($data);
}

?>

Kode Program Download
Lokasi: Serang, Indonesia

Komentar

  1. Anonim20 September 2013 pukul 15.47

    pak Deddy, bgmn kalau menggabungkan autocomplete yg menggunakan source : caring_barang.php
    Saya mau nangkap field, dari array menjadi id.
    tks.

    BalasHapus
  2. Edy Dava16 Agustus 2014 pukul 23.21

    mantap gan ijin coba dulu

    BalasHapus
  3. Unknown31 Agustus 2014 pukul 15.25

    maaf kok pencariaannya gak bisa knp ya mas,mohon bimbingannya??

    BalasHapus
  4. Unknown14 Mei 2016 pukul 13.46

    pak, saya ingin belajar membuat web responsive tentang membuat aplikasi CRUD dengan PHP & PostgreSQL. bisa buatkan saya TUTOR lengkap dasar-lanjut, jika cocok saya bersedia membeli TUTOR nya.

    Thz, Eddy - 0823 020 73513

    BalasHapus
  5. Anonim25 Oktober 2016 pukul 09.20

    kok linknya error?? bisa di perbarui ??

    BalasHapus

Posting Komentar