Esempi di ricerca in tempo reale PHP AJAX
AJAX in grado di fornire agli utenti un più amichevole esperienza di ricerca, più interattiva.
AJAX Live Search
Negli esempi che seguono, ci prova di una ricerca in tempo reale, si possono ottenere risultati di ricerca durante la digitazione di dati allo stesso tempo.
ricerca in tempo reale con la ricerca tradizionale, a fronte di molti vantaggi:
- Quando si digitano i dati, mostrerà il risultato di una partita
- Quando continuare a digitare i dati, i risultati del filtro
- Se il risultato è troppo piccolo, è possibile eliminare il carattere per ottenere una gamma più ampia
Inserisci nella casella di testo sotto "HTML", le ricerche contenenti pagina HTML:
Esempi dei risultati di cui sopra in un file XML ( links.xml per trovare) in. Per fare questo esempio, piccola e semplice, offriamo solo 6 risultati.
pagina HTML - Esempi spiegano
Quando un utente in quanto sopra carattere casella di input esegue "showResult) (" la funzione. Questa funzione è costituito da "onkeyup" Trigger 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>
Fonte ha spiegato:
Se la casella di input è vuota (str.length == 0), questa funzione si cancellerà il contenuto segnaposto LiveSearch, e uscire dalla funzione.
Se la casella di input non è vuota, allora showResult () esegue le seguenti operazioni:
- Creare l'oggetto XMLHttpRequest
- Creare funzione quando il server è pronto per eseguire la risposta
- File sul server per inviare le richieste
- Si prega di notare che l'aggiunta di (contiene testo) alla fine del parametro URL (q)
PHP file
I server di cui sopra attraverso JavaScript chiamando questa pagina è chiamato file PHP "livesearch.php".
"Livesearch.php" file XML di ricerca il codice sorgente che corrispondono il titolo stringa di ricerca, e restituisce il risultato:
<?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;
?>
Se JavaScript per inviare qualsiasi testo (ad esempio, strlen ($ q)> 0), si verifica:
- Caricare il file XML per il nuovo oggetto DOM XML
- Attraverso tutto elemento <title> al fine di trovare corrispondenza predicazione testo JavaScript
- Impostare l'URL corretto e la variabile titolo "$ risposta". Se trova più di una partita, tutte le partite saranno aggiunti alla variabile.
- Se non viene trovata alcuna corrispondenza, mettere la variabile $ risposta a "alcun suggerimento".