Contoh real-time pencarian PHP AJAX
AJAX dapat memberikan pengguna dengan pengalaman pencarian yang lebih interaktif lebih ramah.
AJAX Live Search
Dalam contoh berikut, kita akan menunjukkan pencarian real-time, Anda bisa mendapatkan hasil pencarian saat Anda mengetik data pada saat yang sama.
pencarian real-time dengan pencari tradisional, dibandingkan dengan banyak keuntungan:
- Ketika Anda mengetik data, ia akan menampilkan hasil pertandingan
- Ketika melanjutkan mengetik data, hasil filter
- Jika hasilnya terlalu kecil, Anda dapat menghapus karakter untuk mendapatkan jangkauan yang lebih luas
Masukkan dalam kotak teks di bawah "HTML", penelusuran yang berisi halaman HTML:
Contoh hasil di atas dalam sebuah file XML ( links.xml untuk menemukan) di. Untuk membuat contoh ini kecil dan sederhana, kami hanya menawarkan 6 hasil.
Contoh menjelaskan - Halaman HTML
Bila pengguna dalam karakter kotak input di atas melakukan "showResult ()" fungsi. Fungsi ini terdiri dari "onkeyup" Pemicu Event:
<html>
<head>
<script>
function showResult(str)
{
if (str.length==0)
{
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行
xmlhttp=new XMLHttpRequest();
}
else
{// 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>
Sumber menjelaskan:
Jika kotak masukan kosong (str.length == 0), fungsi ini akan menghapus konten placeholder LiveSearch, dan keluar fungsi.
Jika kotak input tidak kosong, maka showResult () melakukan langkah-langkah berikut:
- Buat XMLHttpRequest objek
- Membuat fungsi ketika server siap untuk melakukan respon
- Berkas pada server untuk mengirim permintaan
- Harap dicatat bahwa menambah (kotak input berisi) akhir parameter URL (q)
file PHP
Server di atas melalui JavaScript memanggil halaman ini disebut "livesearch.php" file PHP.
"Livesearch.php" XML file kode sumber pencarian yang cocok dengan judul pencarian string, dan mengembalikan hasilnya:
<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
// 从 URL 中获取参数 q 的值
$q=$_GET["q"];
// 如果 q 参数存在则从 xml 文件中查找数据
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)
{
// 找到匹配搜索的链接
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>";
}
}
}
}
}
// 如果没找到则返回 "no suggestion"
if ($hint=="")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
// 输出结果
echo $response;
?>
Jika JavaScript untuk mengirim pesan teks (yaitu, strlen ($ q)> 0), terjadi:
- Memuat file XML ke objek XML DOM baru
- Melalui semua <title> elemen untuk menemukan teks yang cocok JavaScript memberitakan
- Mengatur URL yang benar dan judul "$ respon" variabel. Jika menemukan lebih dari satu pertandingan, semua pertandingan akan ditambahkan ke variabel.
- Jika tidak ada yang cocok, menempatkan variabel $ menanggapi "ada saran".