AJAX dapat digunakan untuk membuat pencarian yang lebih ramah pengguna dan interaktif.
Live Search memiliki lebih banyak manfaat dibandingkan dengan pencarian tradisional, yaitu:
Di bawah ini merupakan links.xml yang membuat contoh kecil dan sederhana untuk melakukan live search AJAX :
Contoh :
<pages> <link> <title>HTML a tag</title> <url>https://www.dosenit.com/tags/tag_a.asp</url> </link> <link> <title>HTML br tag</title> <url>https://www.dosenit.com/tags/tag_br.asp</url> </link> <link> <title>CSS background Property</title> <url>https://www.dosenit.com/cssref/css3_pr_background.asp</url> </link> <link> <title>CSS border Property</title> <url>https://www.dosenit.com/cssref/pr_border.asp</url> </link> <link> <title>JavaScript Date Object</title> <url>https://www.dosenit.com/jsref/jsref_obj_date.asp</url> </link> <link> <title>JavaScript Array Object</title> <url>https://www.dosenit.com/jsref/jsref_obj_array.asp</url> </link> </pages>
Saat pengguna mengetik karakter di kolom input, fungsi “showResult()” dijalankan. Fungsi ini dipicu oleh peristiwa “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 :
Jika field input kosong (str.length == 0), fungsi membersihkan konten placeholder pencarian kehidupan dan keluar dari fungsi.
Jika kolom input tidak kosong, fungsi showResult() akan menjalankan yang berikut ini:
Halaman di server yang disebut dengan JavaScript di atas adalah file PHP yang disebut “LiveSearch.php”.
Kode berikut “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), berikut ini terjadi: