Membuat AJAX Search

May 2, 2011 By Ellyx Christian   Level: Menengah Komentar Print Download Pdf
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
idint(11)primary key
namavarchar(50)
ayahvarchar(50)
ibuvarchar(50)
alamattext
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).
  1. <!--file ajax-search.php -->
  2. <?php if(!isset($_GET['q'])):?>
  3. <!-- form quick search -->
  4. <form name="form1" method="get" action="">
  5. Search : <input type="text" name="q" id="q"/> <input type="submit" value="Search"/>
  6. </form>
  7. <!-- tempat hasil pencarian ditampilkan -->
  8. <div id="result"></div>
  9. <!-- javascript -->
  10. <!-- jquery -->
  11. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  12. <script type="text/javascript">
  13. var allow = true;
  14. $(document).ready(function(){
  15. $("#q").keypress(function(e){
  16. if(e.which == '13'){
  17. e.preventDefault();
  18. loadData();
  19. }else if($(this).val().length >= 2){
  20. loadData();
  21. }
  22. });
  23. });
  24. function loadData(){
  25. if(allow){
  26. allow = false;
  27. $("#result").html('loading...');
  28. $.ajax({
  29. url:'ajax-search.php?q='+escape($("#q").val()),
  30. success: function (data){
  31. $("#result").html(data);
  32. allow = true;
  33. }
  34. });
  35. }
  36. }
  37. </script>
  38. <?php endif;?>
  39. <?php
  40. if(isset($_GET['q']) && $_GET['q']){
  41. $conn = mysql_connect("localhost", "root", "");
  42. mysql_select_db("test");
  43. $q = $_GET['q'];
  44. $sql = "select * from siswa where nama like '%$q%' or
  45. ayah like '%$q%' or ibu like '%$q%' or alamat like '%$q%'";
  46. $result = mysql_query($sql);
  47. if(mysql_num_rows($result) > 0){
  48. ?>
  49. <table>
  50. <tr>
  51. <td>Nama</td>
  52. <td>Ayah</td>
  53. <td>Ibu</td>
  54. <td>Alamat</td>
  55. </tr>
  56. <?php
  57. while($siswa = mysql_fetch_array($result)){?>
  58. <tr>
  59. <td><?php echo $siswa['nama'];?></td>
  60. <td><?php echo $siswa['ayah'];?></td>
  61. <td><?php echo $siswa['ibu'];?></td>
  62. <td><?php echo $siswa['alamat'];?></td>
  63. </tr>
  64. <?php }?>
  65. </table>
  66. <?php
  67. }else{
  68. echo 'Data not found!';
  69. }
  70. }
  71. ?>
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 AskMyPHPtutorials, atau melalui form komentar di bawah.
Tinggalkan Komentar
Loading comment...