Form AutoComplete dengan JQuery

pada tanggal

AutoComplete atau juga dikenal dengan sebutan AutSuggest 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 Anda tidak perlu lagi menuliskan semua kata yang ingin Anda cari. Untuk jelasnya kita buat program tersebut.

  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) {
    $('#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. 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 namabarang from tbbarang where namabarang LIKE '%$q%'");
while($r = mysql_fetch_array($sql)) {
 $nama_barang = $r['namabarang'];
 echo "$nama_barang \n";
}
?>

Script Program Download
Lokasi: Serang, Indonesia

Komentar

  1. Sastro Pawiro6 Maret 2013 pukul 20.41

    Bekerja,, Thanks pak, sangat membantu saya dlm membuat program TA

    BalasHapus
  2. Anonim28 Maret 2014 pukul 16.17

    tanya donk master $_GET['q'] dapet dari mana yaa??koq tiba2 ada gitu?mohon penjelasannya.

    BalasHapus
  3. Unknown13 Mei 2015 pukul 00.35

    pak link tutorialnya pada mati itu....

    bisa kah di kirim lewat email

    BalasHapus
  4. DARYOKO14 Desember 2015 pukul 09.15

    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

Posting Komentar