Pada tutorial sebelumnya kita sudah membahas tentang pencarian dengan jquery AutoComplete yang mana data yang kita cari pada kolom tertentu akan diberikan sugesti oleh jquery tersebut . nah sekarang bagaimana jika kita gabungkan dengan Mr php , penasaran kan?? mari kita bahas masalah kombinasi ajax dan php dalam studi kasus Pencarian data . langsung saja buka editor kesayangan anda dan buat kode seperti dibawah , pertama kita buat dulu ajax+html nya :
<html> <head> <script> function showHint(str) { if (str.length == 0) { document.getElementById("txtHint").innerHTML = ""; return; } else { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("txtHint").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET", "gethint.php?q=" + str, true); xmlhttp.send(); } } </script> </head> <body> <p><b>Silahkan Ketikan pada kolom berikut :</b></p> <form> nama <input type="text" onkeyup="showHint(this.value)"> </form> <p>Nama yang Mungkin Cocok: <span id="txtHint"></span></p> </body> </html> oke setelah selesai mengkode ambil dulu rokok sebatang heheheheh , nah langkah kedua buat sebuah file php yang di jadikan sebagai server side nya . Ketikan Code Berikut : <?php // Array Nama $a[] = "Suriad"; $a[] = "Anwar Sofi"; $a[] = "Try Mersianto"; $a[] = "Joko Susilo"; $a[] = "Jono"; $a[] = "Abdul"; $a[] = "Umul Rokib"; $a[] = "Nur Ardiyansah"; $a[] = "Abdul Muhib"; $a[] = "Ruslan"; $a[] = "Hasrat"; $a[] = "entong"; $a[] = "Indra"; $a[] = "lukiman"; $a[] = "Satria"; $a[] = "Tomi Ali"; $a[] = "Lukas"; $a[] = "Cindy"; $a[] = "Dono"; $a[] = "Kasino"; $a[] = "Indro"; // Ambil q parameter from URL $q = $_REQUEST["q"]; $hint = ""; if ($q !== "") { $q = strtolower($q); $len=strlen($q); foreach($a as $name) { if (stristr($q, substr($name, 0, $len))) { if ($hint === "") { $hint = $name; } else { $hint .= ", $name"; } } } } // Tampilkan "Tidak Ada Nama yang Cocok" jika tidak ada nama yang cocok pada array di atas echo $hint === "" ? "Tidak Ada Nama yang Cocok" : $hint; ?>
EmoticonEmoticon