Form AutoComplete dan Pencarian Data
Tutoral kali ini merupakan lanjutan tutorial AutoComplite, kali ini akan ditambahkan proses pencarian dengan metode JSON.
- Langkah pertama buat database barang
- Langkah kedua buat file barang.php
- Langkah ketiga buat file proses_barang.php
- Langkah keempat buat file cari_barang.php
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');
<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>
<?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";
}
?>
<?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
pak Deddy, bgmn kalau menggabungkan autocomplete yg menggunakan source : caring_barang.php
BalasHapusSaya mau nangkap field, dari array menjadi id.
tks.
mantap gan ijin coba dulu
BalasHapusmaaf kok pencariaannya gak bisa knp ya mas,mohon bimbingannya??
BalasHapuspak, 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.
BalasHapusThz, Eddy - 0823 020 73513
kok linknya error?? bisa di perbarui ??
BalasHapus