Membuat AJAX Search

Tutorial Membuat AJAX Search atau skrip pencarian data menggunakan AJAX. Tutorial ini adalah kelanjutan dari tutorial Membuat Searching (Skrip Pencarian Data). Sebelum mengikuti tutorial ini ada baiknya untuk mengikuti tutorial AJAX sebelumnya. AJAX search bisa diterapkan pada quick search. Hasil akhir tutorial ini adalah skrip pencarian seperti google instant search. Tutorial ini menggunakan jQuery, jQuery bisa didownload di website jQuery, atau bisa juga menggunakan google CDN http://code.google.com/apis/libraries/devguide.html#jquery.

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 Jika ada pertanyaan silahkan di Sangkep, atau melalui form komentar di bawah.