AJAX dapat digunakan untuk membuat user-friendly dan interaktif pencarian yang lebih.
AJAX Live Search
Contoh berikut akan menunjukkan pencarian hidup, di mana Anda mendapatkan hasil pencarian saat Anda mengetik.
Live search memiliki banyak manfaat dibandingkan dengan pencarian tradisional:
- Hasilnya ditunjukkan saat Anda mengetik
- Hasil mempersempit sebagai Anda terus mengetik
- Jika hasilnya menjadi terlalu sempit, menghapus karakter untuk melihat hasil yang lebih luas
Mencari halaman w3ii di bidang input di bawah:
Hasil dalam contoh di atas ditemukan dalam file XML ( links.xml ) . Untuk membuat contoh ini kecil dan sederhana, hanya enam hasil yang tersedia.
Contoh Dijelaskan - The HTML Halaman
Ketika seorang pengguna jenis karakter di bidang masukan di atas, fungsi " showResult() " dijalankan. Fungsi ini dipicu oleh "onkeyup" acara:
<html>
<head>
<script>
function showResult(str)
{
if (str.length==0) {
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("livesearch").innerHTML=xmlhttp.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 kolom input kosong (str.length==0) , fungsi membersihkan isi dari placeholder LiveSearch dan keluar fungsi.
Jika field input tidak kosong, showResult() fungsi mengeksekusi berikut:
- Membuat objek XMLHttpRequest
- Buat fungsi yang akan dijalankan ketika respon server siap
- Kirim permintaan off ke file di server
- Perhatikan bahwa parameter (q) ditambahkan ke URL (dengan isi dari field input)
PHP Berkas
Halaman pada 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), berikut ini terjadi:
- Memuat file XML menjadi objek XML DOM baru
- Loop melalui semua <title> elemen untuk menemukan pertandingan dari teks yang dikirim dari JavaScript
- Set url yang benar dan judul dalam "$response" variabel. Jika lebih dari satu pertandingan ditemukan, semua pertandingan ditambahkan ke variabel
- Jika tidak ada pertandingan yang ditemukan, variabel $ respon diatur ke "no suggestion"