Autocomplete yang tidak muncul php json
Frezen · Aug 28, 2012
Selamat siang mas Ellyx dan master master lainnya .. saya bingung kenapa autocomplete untuk pencarian data saya tidak muncul Tampilannya seperti Gambarnya ini
saya mengunakan database dengan nama pegawai dan table dengan nama pegawai dan 2 file yang pertama search.php sebagai mesin pencari dan penghubung ke database.. script code nya ini
file yang kedua sebagai tampilan index.html script codenya ini
untuk source codenya beserta file file lengkapnya diini
Mohon Bantuannya Terima kasih
saya mengunakan database dengan nama pegawai dan table dengan nama pegawai dan 2 file yang pertama search.php sebagai mesin pencari dan penghubung ke database.. script code nya ini
<?php
/*
* JQuery autocomplete selalu mengirimkan parameter dengan nama "q"
* dimana isi dari "q" adalah inputan dari textbox pada file "index.html"
* */
if(isset($_GET['q'])){
mysql_connect('localhost','root','12345678'); # koneksi ke database
mysql_select_db('pegawai'); # pilih table
/*
* parameter "q" harus di-filter minimal dengan mysql_escape_string
* hanya untuk berjaga-jaga apabila ada inputan dengan karakter khusus
* yang error ketika dibaca oleh syntax query MySQL
* */
$param = mysql_escape_string($_GET['q']);
# lakukan pencarian, tampilkan nama pegawai yang berawalan nilai parameter "q"
$query = mysql_query("SELECT * FROM pegawai WHERE nama LIKE '$param%'") or die(mysql_error());
if(mysql_num_rows($query) > 0){
$data = array(); # siapkan variable untuk menampung keseluruhan data
while($row = mysql_fetch_object($query)){
$data[] = $row; # input data ke variable array satu per satu baris hasil query
}
/*
* Variable yang mengandung keseluruhan data dari query lalu di konversi
* ke JSON dengan fungsi dari PHP5 "json_encode". Hasil keluaran ini akan
* diterima dan di proses oleh Ajax di plugin autocomplete pada file "index.html"
* */
die(json_encode($data));
}
}
?>
file yang kedua sebagai tampilan index.html script codenya ini
<html>
<head>
<title>JQuery Fancy Auto Complete</title>
<script type='text/javascript' src='js/jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='js/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
<link rel="stylesheet" type="text/css" href="css/custom_search.css" />
<script language="javascript">
$(function(){
/* id inputan yang akan melakukan proses autocomplete adalah "suggest"
request data autocomplete menuju ke "search.php" */
$('#suggest').autocomplete('search.php',
{
/* parameter "parse" pada script ini sebenarnya adalah deklarasi ulang
dari event parse di library jquery-autocomplete.
fungsinya adalah untukmenghandle data yang diterima, karena data yang
diterima adalah Ajax maka penanganannya adalah sebagai berikut: */
parse:function(data){
var parsed = [];
for (var i=0; i < data.length; i++) {
parsed[i] = {
data:data[i],
value:data[i].nama // nama field yang dicari
};
}
return parsed;
},
/* pada parameter formatItem, kita dapat mengcustom tampilan yang akan muncul ketika
ada result dari hasil pencarian autocomplete, kalau formatItem ini tidak di deklarasikan
maka hanya akan muncul berupa daftar nama yang terkesan kaku */
formatItem:function(data,i,max){
var str = '<div class="search_content">';
/* tampilkan foto, apabila foto kosong, maka tampilkan default unknown image
berapapun lebar foto ini, tingginya disesuaikan menjadi 50px agar tidak menghabiskan tempat */
str += '<img src="'+(data.foto ? data.foto : 'foto/unknown.jpeg')+'" height="50" align="left" />';
/* variable "data" merupakan variable dengan tipe json atau array assosiatif javascript 1 dimensi
oleh karena itu dalam mengambil setiap pada "data" hanya dengan "data.nama_property" */
str += '<u>'+data.nama+'</u><br />'+data.alamat+'<br />Telp: '+data.telepon;;
str += '</div>';
return str;
},
width: 270, // panjang tampilan pencarian autocomplete yang akan muncul di bawah textbox pencarian
dataType: 'json' // tipe data yang diterima oleh library ini disetup sebagai JSON
}
).result( // fungsi ini akan dipanggil setelah user memilih salah satu result pencarian autocomplete
function(event,data,formated){
/* variable "data" merupakan variable dengan tipe json atau array assosiatif javascript 1 dimensi
oleh karena itu dalam mengambil setiap pada "data" hanya dengan "data.nama_property" */
$('#pegawaiDetail').show(); // tampilan table detail yang di hide sebelumnya
$('#dataNIP').text(data.NIP);
$('#dataNama').text(data.nama);
$('#dataAlamat').text(data.alamat);
$('#dataTelepon').text(data.telepon);
$('#dataUmur').text(data.umur);
// tampilkan foto pada element <img id="dataFoto">, apabila foto kosong, maka tampilkan default unknown image
$('#dataFoto').attr('src',data.foto ? data.foto : 'foto/unknown.jpeg');
}
);
});
</script>
</head>
<body>
Cari Pegawai: <input type="text" id="suggest" /><br /><br />
<table id="pegawaiDetail" style="display:none">
<tr>
<td colspan="4"><div class="detail_title">Detail Pegawai</div></td>
</tr>
<tr valign="top">
<td rowspan="5"><img src="" id="dataFoto" /></td>
<td>NIP</td>
<td>:</td>
<td id="dataNIP"></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td id="dataNama"></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td id="dataAlamt"></td>
</tr>
<tr>
<td>Telepon</td>
<td>:</td>
<td id="dataTelepon"></td>
</tr>
<tr>
<td>Umur</td>
<td>:</td>
<td id="dataUmur"></td>
</tr>
</table>
</body>
</html>
untuk source codenya beserta file file lengkapnya diini
Mohon Bantuannya Terima kasih