Tutorial PHP - Membuat pencarian tanpa loading dengan ajax

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).

<!--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

Share this post