Cara Membuat Form Autocomplete di PHP
Dalam posting sebelumnya saya sudah menulis tentang "Cara membuat web sederhana menggunakan PHP". Pada kesempatan kali ini saya kembali akan membagikan tutorial bagaimana cara membuat form autocomplete di PHP dengan menggunakan Jquery.
AutoComplete atau juga dikenal dengan sebutan AutoSuggest adalah fitur tambahan dalam suatu form input untuk menampilkan data-data yang sesuai dengan apa yang diketik user pada form. Contohnya adalah form pencarian Google, dimana ketika kita menuliskan suatu kalimat yang belum utuh, maka secara otomatis akan tersedia daftar data-data yang menyambungkan kalimat tersebut secara utuh, sehingga kalian tidak perlu lagi menuliskan semua kata yang ingin dicari. Untuk jelasnya kita buat program tersebut.
Persiapan : silahkan download file javascript autocomplete yang terbaru disini
1. Membuat database Barang
untuk struktur tabelnya silahkan copypaste saja script sql dibawah ini :
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. Membuat file barang.php
<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>3. Membuat file proses_barang.php
<?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";
}
?>Ok, Form autocomplete selesai.. download file yang sudah jadi disni
Sekian posting kali ini semoga bermanfaat :-bd
Tidak ada komentar