Tutorial Membuat AJAX Search dengan PHP

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

Artikel Terkait di Bawah posting

php

• Script PHP Untuk Membuat Web Thumbnail / Screen Shot
• Update Data Suatu Tabel Bersumber Dari Tabel Lain Dengan Query SQL
• Script PHP Menampilkan Artikel Terkait
• Script php untuk membuat grafik
• Mencari Tingkat Text Similarity dengan PHP
• Cara install Wammu untuk/for ubuntu
• Contoh Relasi SQL antar tabel
• Problem Warning/Error Timezone di PHP
• Membuat Login Alternatif (Open ID) dengan Php
• Plugin Auto Forward SMS Inbox (Sms Gateway)
• Membuat barcode dengan php (Script)
• Membuat Website Dinamis Dengan PHP & MySQL
• Script PHP Update Status TWITTER via SMS
• Cara Import Database mysql di Phpmyadmin
• Pasang Social Bookmark | jQuery
• Optimalkan SEO on page tingkatin pagerank
• Membuat User Online dengan PHP
• Hit Counter Sederhana dengan PHP
• Membuat kamus Teknologi Informasi dengan PHP
• Script wall facebook gratis dengan php dan jquery
• Script PHP dan MySQL untuk kirim SMS Via Web
• Script PHP GIS Google Map Seperti Wikimapia dengan jQuery dan Mysql
• Script Notifikasi Seperti Facebook dengan jQuery dan PHP
• Memasang ReCaptcha di PHP
• Script PHP Untuk Backup MySQL

Posted in: php