PHP MYSQL AJAX – Autocomplete Fill Form

autocomplete-fill-form

PHP MYSQL AJAX – Autocomplete Fill Form – Sebelumnya saya juga pernah posting tentang tutorial bagaimana membuat autocomplete form, namun tidak fill form. Nah untuk yang kali ini ada fill formnya, maksud dari fill form adalah langsung mengisi otomatis form yang ada di bawahnya ketika pencarian di lakukan pada form diatas atau sebelunya.

Gunanya adalah untuk memudahkan pengisian data yang datanya di ambil dari tabel database tanpa perlu mencari manual satu persatu pada pengisian inputan form.

PHP MYSQL AJAX – Autocomplete Fill Form

Pada kasus Saya ini, ceritanya saya akan membuat pencarian kode barang dan akan mengisi otomatis nama barang, harga barang, stok barang pada form yang ada di bawahnya. Untuk tabelnya pada contoh ini kita gunakan tabel barang.

Untuk membuatnya ikuti langkah-langkah dibawah ini:

1. Form pencarian dan form yang akan di isi otomatis

<label>Kode Barang</label>
 <input type="text" class="form-control" id="kode" name="kode" ><br/>
 <label>Nama</label>
 <input type="text" class="form-control" id="nama" name="nama" readonly><br/>
 <label>Harga</label>
 <input type="text" class="form-control" id="harga" name="harga" readonly><br/>
 <label>Stok</label>
 <input type="text" class="form-control" id="stok" name="stok" readonly><br/>
 <input type="hidden" class="form-control" id="idb" name="idb">

2. ajaxBarang, file script php untuk pencarian

Untuk database pada contoh ini yaitu “UKM”

<?php
$server = "localhost";
$username = "root" ;
$password = "" ;
$database = "ukm";

$con = new mysqli($server,$username,$password,$database);
if($con->connect_error){
die("Koneksi gagal: ".$con->connect_error);
}
$sql = $con->query ("SELECT * FROM barang");
while ($row = $sql->fetch_assoc()) {
 $kodes[] = array('kode' => $row['kodeBarang'],'nama' => $row['namaBarang'],'harga' => $row['hargaBarang'],'stok' => $row['stokBarang'],'idBarang' => $row['idBarang']);
}
// Cleaning up the term
$term = trim(strip_tags($_GET['term']));

// Rudimentary search
$matches = array();
foreach($kodes as $kode){
 if(stripos($kode['kode'], $term) !== false){
 // Add the necessary "value" and "label" fields and append to result set
 $kode['value'] = $kode['kode'];
 $kode['label'] = "{$kode['kode']} - {$kode['nama']}";
 $matches[] = $kode;
 }
}

// Truncate, encode and return the results
$matches = array_slice($matches, 0, 6);
print json_encode($matches);
?>

3. Script ajax

Tempatkan script berikut ini pada bagian bawah web kamu, tepatnya sebelum tag </body>,

<script>
 $(document).ready(function() {

//barang________
 var ac_config = {
 source: "modul/penjualan/ajaxBarang.php",
 select: function(event, ui){
 $("#kode").val(ui.item.kode);
 $("#nama").val(ui.item.nama);
 $("#harga").val(ui.item.harga);
 $("#stok").val(ui.item.stok);
 $("#idb").val(ui.item.idb);
 },
 minLength:1
 };
 $("#kode").autocomplete(ac_config);
 })
 </script>

Penjelasan:

1. source: “modul/penjualan/ajaxBarang.php”, Merupakan link atau lokasi dimana ajax untuk menampilkan data di letakkan
2. $(“#kode”).autocomplete(ac_config);, merupakan id pada form yang berguna untuk melakukan pencarian data
3. Dan ketiga id di bawah ini untuk menampilkan hasil pencarian data

$(“#kode”).val(ui.item.kode);
$(“#nama”).val(ui.item.nama);
$(“#harga”).val(ui.item.harga);
$(“#stok”).val(ui.item.stok);
$(“#id”).val(ui.item.id);

Oke silahkan di coba, kalau merasa kesulitan dan pengen yang instan langsung aja download script-script untuk autocmplete diatas disini.

Klik WA: 082285417494