Saya coba membuat autocomplete untuk inputan transaksi.
get_data.php
<?php
$conn = oci_connect('amin', 'amin', 'hp/XE');
if (!$conn) {
$e = oci_error();
trigger_error(htmlentities($e['message'], ENT_QUOTES), E_USER_ERROR);
}
$term = $_GET['code'];
$query = oci_parse($conn,"select * from barang where kdbar = '".$term."'");
oci_execute($query);
$produk = oci_fetch_array($query);
$json = array(
'label' => $produk['kdbar'].' - '.$produk['nmbar'], // text sugesti saat user mengetik di input box
'value' => $produk['kdbar'], // nilai yang akan dimasukkan diinputbox saat user memilih salah satu sugesti
'nama' => $produk['nmbar']
);
header("Content-Type: text/json");
echo json_encode($json);
?>
kemudian untuk autocompletenya sebagai berikut.
<!doctype html>
<html>
<head>
<title>Tutorial Autocomplete</title>
<!-- tambahkan jquery dan jquery ui -->
<script type="text/javascript" src="jquery-ui/js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="jquery-ui/js/jquery-ui-1.10.0.custom.min.js"></script>
<link type="text/css" rel="stylesheet" href="jquery-ui/css/smoothness/jquery-ui-1.10.0.custom.min.css"/>
</head>
<body>
<form method="post" action="">
Kode: <input type="text" id="kdbar" name="kdbar"/> Name: <span id="nama-produk">-</span>
<br/><input type="submit" value="submit"/>
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#kdbar").autocomplete({
minLength:2,
source:'get_data.php',
select:function(event, ui){
$('#name').val(ui.item.nama); // untuk isi value input text
}
});
$("#kdbar").blur(function(){
if($('#name').val()){
return;
}
$.ajax({
dataType:'json',
url:'get_data.php?code='+$('#kdbar').val(),
success:function(resp){
$('#name').val(resp.nama);
}
});
});
});
</script>
</body>
</html>
Mohon koreksinya bagian mana yang salah.
Terimakasih.