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'])):?><br><!-- form quick search --> <br><form name="form1" method="get" action=""> <br>Search : <input type="text" name="q" id="q"/> <input type="submit" value="Search"/> <br></form> <br><!-- tempat hasil pencarian ditampilkan --><br><div id="result"></div><br><!-- javascript --><br><!-- jquery --><br><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script><br><script type="text/javascript"><br> var allow = true;<br> $(document).ready(function(){<br> $("#q").keypress(function(e){<br> if(e.which == '13'){<br> e.preventDefault();<br> loadData();<br> }else if($(this).val().length >= 2){<br> loadData();<br> }<br> });<br> });<br> function loadData(){<br> if(allow){<br> allow = false;<br> $("#result").html('loading...');<br> $.ajax({<br> url:'ajax-search.php?q='+escape($("#q").val()),<br> success: function (data){<br> $("#result").html(data);<br> allow = true;<br> }<br> });<br> }<br> }<br></script><br><?php endif;?><br><?php <br>if(isset($_GET['q']) && $_GET['q']){ <br> $conn = mysql_connect("localhost", "root", ""); <br> mysql_select_db("test"); <br> $q = $_GET['q']; <br> $sql = "select * from siswa where nama like '%$q%' or <br> ayah like '%$q%' or ibu like '%$q%' or alamat like '%$q%'"; <br> $result = mysql_query($sql); <br> if(mysql_num_rows($result) > 0){ <br> ?> <br> <table> <br> <tr> <br> <td>Nama</td> <br> <td>Ayah</td> <br> <td>Ibu</td> <br> <td>Alamat</td> <br> </tr> <br> <?php <br> while($siswa = mysql_fetch_array($result)){?> <br> <tr> <br> <td><?php echo $siswa['nama'];?></td> <br> <td><?php echo $siswa['ayah'];?></td> <br> <td><?php echo $siswa['ibu'];?></td> <br> <td><?php echo $siswa['alamat'];?></td> <br> </tr> <br> <?php }?> <br> </table> <br> <?php <br> }else{ <br> echo 'Data not found!'; <br> } <br>} <br>?>
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