AJAX dapat digunakan untuk membuat pencarian yang lebih ramah pengguna dan interaktif.
Live Search AJAX
Live Search memiliki lebih banyak manfaat dibandingkan dengan pencarian tradisional, yaitu:
- Hasil ditampilkan saat mengetik
- Hasil menyempit saat terus mengetik
- Jika hasil menjadi terlalu sempit, hapus karakter untuk melihat hasil yang lebih luas
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>
Penjelasan Contoh – Halaman HTML
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:
- Buat objek XMLHttpRequest
- Buat fungsi untuk dijalankan saat respons server siap
- Kirim permintaan ke file di server
- Perhatikan bahwa parameter (q) ditambahkan ke URL (dengan konten field input)
File PHP
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:
- Muat file XML ke dalam objek XML DOM baru
- Ulangi semua elemen <title> untuk menemukan kecocokan dari teks yang dikirim dari JavaScript.
- Menyetel 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”
