Tutorial AJAX search ini masih menggunakan tabel siswa seperti berikut:
Fieldname | Tipe Data | Keterangan |
---|---|---|
id | int(11) | primary key |
nama | varchar(50) | |
ayah | varchar(50) | |
ibu | varchar(50) | |
alamat | text |
selain itu diasumsikan Anda telah memiliki pengetahuan javascript, DOM dan jQuery.
AJAX Search
Gunakanlah skrip php dan javascript di bawah untuk membuat AJAX search (simpan dengan nama ajax-search.php). Skrip di bawah merupakan pengembangan dari skrip quick search di tutorial Membuat Searching (Skrip Pencarian Data).
<!--file ajax-search.php -->
<?php if(!isset($_GET['q'])):?>
<!-- form quick search -->
<form name="form1" method="get" action="">
Search : <input type="text" name="q" id="q"/> <input type="submit" value="Search"/>
</form>
<!-- tempat hasil pencarian ditampilkan -->
<div id="result"></div>
<!-- javascript -->
<!-- jquery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
var allow = true;
$(document).ready(function(){
$("#q").keypress(function(e){
if(e.which == '13'){
e.preventDefault();
loadData();
}else if($(this).val().length >= 2){
loadData();
}
});
});
function loadData(){
if(allow){
allow = false;
$("#result").html('loading...');
$.ajax({
url:'ajax-search.php?q='+escape($("#q").val()),
success: function (data){
$("#result").html(data);
allow = true;
}
});
}
}
</script>
<?php endif;?>
<?php
if(isset($_GET['q']) && $_GET['q']){
$conn = mysql_connect("localhost", "root", "");
mysql_select_db("test");
$q = $_GET['q'];
$sql = "select * from siswa where nama like '%$q%' or
ayah like '%$q%' or ibu like '%$q%' or alamat like '%$q%'";
$result = mysql_query($sql);
if(mysql_num_rows($result) > 0){
?>
<table>
<tr>
<td>Nama</td>
<td>Ayah</td>
<td>Ibu</td>
<td>Alamat</td>
</tr>
<?php
while($siswa = mysql_fetch_array($result)){?>
<tr>
<td><?php echo $siswa['nama'];?></td>
<td><?php echo $siswa['ayah'];?></td>
<td><?php echo $siswa['ibu'];?></td>
<td><?php echo $siswa['alamat'];?></td>
</tr>
<?php }?>
</table>
<?php
}else{
echo 'Data not found!';
}
}
?>
pada baris ke-11 sampai ke-37 ditambahkan javascript untuk menampilkan data secara dinamis pada saat pengguna mengetikkan 3 karakter atau lebih atau pada saat pengguna menekan tombol enter.
Selamat Mencoba
Posting Komentar