Contoh PHP - Pencarian Langsung AJAX
AJAX dapat digunakan untuk membuat pencarian yang lebih ramah pengguna dan interaktif.
Pencarian Langsung AJAX
Contoh berikut akan menunjukkan pencarian langsung, di mana Anda mendapatkan hasil pencarian saat Anda mengetik.
Pencarian langsung memiliki banyak manfaat dibandingkan dengan pencarian tradisional:
- Hasil ditampilkan saat Anda mengetik
- Hasil menyempit saat Anda terus mengetik
- Jika hasil menjadi terlalu sempit, hapus karakter untuk melihat hasil yang lebih luas
Cari halaman W3Schools di kolom input di bawah ini:
Hasil pada contoh di atas ditemukan dalam file XML ( links.xml ). Untuk membuat contoh ini kecil dan sederhana, hanya enam hasil yang tersedia.
Contoh Dijelaskan - Halaman HTML
Saat pengguna mengetik karakter di kolom input di atas, fungsi "showResult()" dijalankan. Fungsi dipicu oleh acara "onkeyup":
<html>
<head>
<script>
function showResult(str)
{
if (str.length==0) {
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("livesearch").innerHTML=this.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html>
Penjelasan kode sumber:
Jika kolom input kosong (str.length==0), fungsi akan menghapus konten placeholder pencarian langsung dan keluar dari fungsi.
Jika kolom input tidak kosong, fungsi showResult() akan menjalankan yang berikut:
- Buat objek XMLHttpRequest
- Buat fungsi yang akan dieksekusi ketika respons server sudah siap
- Kirim permintaan ke file di server
- Perhatikan bahwa parameter (q) ditambahkan ke URL (dengan konten bidang input)
File PHP
Halaman di server yang disebut oleh JavaScript di atas adalah file PHP yang disebut "livesearch.php".
Kode sumber di "livesearch.php" mencari file XML untuk judul yang cocok dengan string pencarian dan mengembalikan hasilnya:
<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//get the q parameter from URL
$q=$_GET["q"];
//lookup all links from the xml file if length of q>0
if (strlen($q)>0)
{
$hint="";
for($i=0; $i<($x->length); $i++) {
$y=$x->item($i)->getElementsByTagName('title');
$z=$x->item($i)->getElementsByTagName('url');
if ($y->item(0)->nodeType==1) {
//find a link matching the search text
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
if ($hint=="") {
$hint="<a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
} else {
$hint=$hint . "<br /><a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}
// Set output to "no suggestion" if no hint was found
// or to the correct values
if ($hint=="") {
$response="no suggestion";
}
else {
$response=$hint;
}
//output the response
echo $response;
?>
Jika ada teks yang dikirim dari JavaScript (strlen($q) > 0), hal berikut akan terjadi:
- Muat file XML ke objek XML DOM baru
- Ulangi semua elemen <title> untuk menemukan kecocokan dari teks yang dikirim dari JavaScript
- Setel url dan judul yang benar dalam variabel "$response". Jika lebih dari satu kecocokan ditemukan, semua kecocokan ditambahkan ke variabel
- Jika tidak ada kecocokan yang ditemukan, variabel $response disetel ke "tidak ada saran"