PHP und AJAX-Live-Suche
- Vorherige Seite AJAX responseXML
- Nächste Seite AJAX RSS Reader
AJAX bietet den Benutzern eine freundlichere und interaktivere Sucherfahrung.
AJAX Live Search
In diesem AJAX-Beispiel zeigen wir einen Echtzeitsuchen.
Im Vergleich zu traditioneller Suche haben Echtzeitsuchen viele Vorteile:
- Wenn Sie Daten eingeben, werden die übereinstimmenden Ergebnisse angezeigt
- Die Ergebnisse werden kontinuierlich gefiltert, wenn Sie Daten eingeben
- Wenn die Ergebnisse zu gering sind, können Sie durch Entfernen von Zeichen ein breiteres Spektrum erhalten
Suchen Sie im folgenden Textfeld nach den Seiten von CodeW3C.com
Dieses Beispiel umfasst vier Elemente:
- Einfaches HTML-Formular
- JavaScript
- PHP-Seite
- XML-Dokument
In diesem Beispiel befinden sich die Ergebnisse in einem XML-Dokument (links.xml) gesucht. Um diesen Beispiel so klein und einfach wie möglich zu halten, bieten wir nur 8 Ergebnisse an.
HTML-Formular
Dies ist eine HTML-Seite. Sie enthält ein einfaches HTML-Formular, die CSS-Styles für dieses Formular und einen Link zum JavaScript:
<html>
<head>
<script src="livesearch.js"></script>
<style type="text/css">
#livesearch
{
margin:0px;
width:194px;
}
#txt1
{
margin:0px;
}
</style>
</head>
<body>
<form>
<input type="text" id="txt1" size="30"
onkeyup="showResult(this.value)"
<div id="livesearch"></div>
</form>
</body>
</html>
Beispiel Erklärung - HTML-Formular
Wie Sie sehen können, enthält die HTML-Seite ein einfaches HTML-Formular, in dem das Textfeld "txt1" heißt.
So funktioniert das Formular:
- Bei Drücken und Loslassen einer Taste im Textfeld wird ein Ereignis ausgelöst.
- Bei Auslösung eines Ereignisses wird die Funktion showResult() aufgerufen.
- Unter dem Formular befindet sich ein nach "livesearch" benanntes <div>-Element. Es dient als Platzhalter für die von showResult() zurückgegebenen Daten.
JavaScript
JavaScript-Code wird im mit dem HTML-Dokument verbundenen "livesearch.js" gespeichert:
var xmlHttp
function showResult(str)
{
if (str.length==0)
{
document.getElementById("livesearch").
innerHTML="";
document.getElementById("livesearch").
style.border="0px";
return
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert("Browser unterstützt keine HTTP-Anfragen")
return
}
var url="livesearch.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("livesearch").
innerHTML=xmlHttp.responseText;
document.getElementById("livesearch").
style.border="1px solid #A5ACB2";
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
Beispiel Erklärung:
GetXmlHttpObject mit PHP und AJAX-Anfragen entspricht dem Beispiel.
Funktion showResult()
Diese Funktion wird jedes Mal ausgeführt, wenn ein Zeichen in das Textfeld eingefügt wird.
Wenn im Textfeld keine Eingaben vorhanden sind (str.length == 0), setzt die Funktion das Rückgabefeld auf leer und entfernt alle umgebenden Rahmen.
Allerdings führt die Funktion aus, wenn im Textfeld Eingaben vorhanden sind:
- Definieren Sie die URL (Dateiname), die an den Server gesendet wird.
- Fügen Sie den Parameter (q) mit dem Inhalt des Eingabefelds zur URL hinzu.
- Fügen Sie eine Zufallszahl hinzu, um zu verhindern, dass der Server Cache-Dateien verwendet.
- Die Funktion GetXmlHttpObject wird verwendet, um ein XMLHTTP-Objekt zu erstellen und dem Funktion aufruft stateChanged, wenn eine Änderung ausgelöst wird.
- Öffnen eines XMLHTTP-Objekts mit der angegebenen URL
- Senden eines HTTP-Anfrage an den Server
Funktion stateChanged()
Diese Funktion wird ausgeführt, wenn der Status des XMLHTTP-Objekts sich ändert.
Wenn der Status auf 4 (oder "complete") gesetzt wird, wird der Text der txtHint-Platzhalter mit dem Antworttext gefüllt und ein Rahmen um den Rückgabefeld gesetzt.
PHP-Seite
Die Serverseite, die von JavaScript-Code aufgerufen wird, ist die PHP-Datei "livesearch.php".
"livesearch.php" überprüft den XML-Dokument "links.xml", das die Titel und URLs einiger Seiten von codew3c.com enthält.
Diese Codes durchsuchen die XML-Datei nach Titeln, die dem Suchtext entsprechen, und geben die Ergebnisse in HTML zurück:
<?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>";
}
}
}
}
}
//Setzen Sie die Ausgabe auf "keine Vorschläge", falls keine Hinweise gefunden wurden
//Oder zu den richtigen Werten
if ($hint == "")
{
$response="keine Vorschläge";
}
else
{
$response=$hint;
}
//Die Antwort ausgeben
echo $response;
?>
Beispiel Erklärung:
Es wird passiert, wenn vom JavaScript irgendein Text gesendet wird (strlen($q) > 0)
- Ein XML DOM-Objekt zum Erstellen der Datei "links.xml" in PHP
- Durchsuchen Sie alle "title"-Elemente (nodetypes = 1), um den Namen zu finden, der von JavaScript übergeben wurde
- Ein Link mit dem richtigen Titel wird gefunden und in die Variable "$response" gesetzt. Falls mehr als ein Treffer gefunden wird, werden alle Treffer zur Variable hinzugefügt
- Falls keine Übereinstimmungen gefunden werden, wird die Variable $response auf "keine Vorschläge" gesetzt
- $result ist das Ausgabeziel für den "livesearch"-Platzhalter
- Vorherige Seite AJAX responseXML
- Nächste Seite AJAX RSS Reader
