Beispiele für Echtzeit-Suche PHP AJAX
AJAX können die Nutzer mit einer freundlicher, interaktive Sucherlebnis.
AJAX Live Search
In den folgenden Beispielen werden wir eine Suche in Echtzeit zeigen, können Sie die Suchergebnisse zu bekommen, wie Sie Daten zur gleichen Zeit ein.
Echtzeit-Suche mit herkömmlichen Suche, verglichen mit vielen Vorteilen:
- Wenn Sie Daten eingeben, wird es das Ergebnis eines Spiels zeigen
- Wenn weiterhin Daten, filtern Sie Ergebnisse eingeben
- Wenn das Ergebnis zu klein ist, können Sie das Zeichen löschen ein breiteres Spektrum zu erhalten
Geben Sie in das Textfeld unter "HTML", sucht HTML-Seite:
Beispiele für die obigen Ergebnisse in einer XML - Datei ( links.xml zu finden) in. Um dieses Beispiel zu klein und einfach zu machen, bieten wir nur 6 Treffer.
Beispiele erläutern - HTML-Seite
Wenn ein Benutzer in der obigen Eingabefeld Zeichen führt "showResult ()" Funktion. Diese Funktion besteht aus "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>
Quelle erklärt:
Wenn das Eingabefeld leer ist (str.length == 0), wird diese Funktion Livesearch Platzhalter Inhalt löschen und die Funktion beenden.
Wenn das Eingabefeld nicht leer ist, dann showResult () führt die folgenden Schritte aus:
- Erstellen Sie XMLHttpRequest-Objekt
- Erstellen Sie Funktion, wenn der Server bereit ist, die Reaktion durchzuführen
- Datei auf dem Server-Anforderungen zu senden
- Bitte beachten Sie, dass das Hinzufügen zu (enthält Eingabefeld), um das Ende des URL-Parameters (q)
PHP-Datei
Die oben genannten Server über JavaScript, um diese Seite aufrufen wird "livesearch.php" PHP-Datei bezeichnet.
"Livesearch.php" Quellcode Suche XML-Dateien, die den Such-String Titel übereinstimmen, und gibt das Ergebnis:
<?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;
?>
Wenn JavaScript beliebigen Text zu senden (dh strlen ($ q)> 0), tritt auf:
- Laden Sie die XML-Datei in das neue XML-DOM-Objekt
- Durch alle <title> Element, um passend zu finden Text JavaScript Predigen
- Stellen Sie die richtige URL und den Titel "$ response" Variable. Wenn es mehr als eine Übereinstimmung findet, wird alle Spiele auf die Variable hinzugefügt werden.
- Wenn keine Übereinstimmung gefunden wird, legen Sie die $ response Variable auf "keinen Vorschlag".