Form AutoComplete dengan JQuery
- Langkah pertama buat database barang
- Langkah kedua buat file barang.php
- Langkah ketiga buat file proses_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) {
$('#pilihan').html("<p>Anda memilih Barang: " + formatted + "</p>");
});
});
</script>
</head>
<body>
<div class="demo" style="width: 250px;">
<div><p>Nama Barang : <input type="text" id="barang"></p></div>
</div>
<div id="pilihan"></div>
</body>
</html>
<?php
mysql_connect("localhost","root","");
mysql_select_db("tutorial_jquery");
$q = strtolower($_GET["q"]);
if (!$q) return;
$sql = mysql_query("select namabarang from tbbarang where namabarang LIKE '%$q%'");
while($r = mysql_fetch_array($sql)) {
$nama_barang = $r['namabarang'];
echo "$nama_barang \n";
}
?>
Script Program Download
Bekerja,, Thanks pak, sangat membantu saya dlm membuat program TA
BalasHapustanya donk master $_GET['q'] dapet dari mana yaa??koq tiba2 ada gitu?mohon penjelasannya.
BalasHapuspak link tutorialnya pada mati itu....
BalasHapusbisa kah di kirim lewat email
Pak Deddy gmn kalau file proses_barang.php saya modif seperti ini?Harapan Saya yang muncul tidak hanya nama barang tapi juga kodenya.untuk mempermudah pencarian barang.dan Begitu diklik/dipilih yang nempel di textboxnya hanya kode barang saja.GMN?Ada solusi?
BalasHapus