AJAX kann verwendet werden, um benutzerfreundlichere und interaktivere Suchen zu erstellen.
AJAX-Live-Suche
Das folgende Beispiel zeigt eine Live-Suche, bei der Sie während der Eingabe Suchergebnisse erhalten.
Die Live-Suche hat im Vergleich zur herkömmlichen Suche viele Vorteile:
Ergebnisse werden während der Eingabe angezeigt
Die Ergebnisse werden beim Weitertippen eingeschränkt
Wenn die Ergebnisse zu eng werden, entfernen Sie die Zeichen, um ein breiteres Ergebnis zu sehen
Suchen Sie im Eingabefeld unten nach einer W3Schools-Seite:
Die Ergebnisse im obigen Beispiel finden Sie in einer XML-Datei
(links.xml). Um das zu machen
Beispiel klein und einfach, es stehen nur sechs Ergebnisse zur Verfügung.
Beispiel erklärt - Die HTML-Seite
Wenn ein Benutzer ein Zeichen in das obige Eingabefeld eingibt, wird die Funktion "showResult()" ausgeführt. Die Funktion wird durch das "onkeyup" ausgelöst
Veranstaltung:
<html>
<Kopf>
<Skript>
Funktion showResult(str)
{
if (str.länge==0) {
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
Rückkehr;
}
var xmlhttp=neues XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("livesearch").innerHTML=this.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<Körper>
<Formular>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html>
Erklärung des Quellcodes:
Ist das Eingabefeld leer (str.length==0), löscht die Funktion die
Inhalt des Livesearch-Platzhalters und beendet die Funktion.
Wenn das Eingabefeld nicht leer ist, führt die Funktion showResult() Folgendes aus:
Erstellen Sie ein XMLHttpRequest-Objekt
Erstellen Sie die Funktion, die ausgeführt werden soll, wenn die Serverantwort bereit ist
Senden Sie die Anfrage an eine Datei auf dem Server
Beachten Sie, dass der URL (mit dem Inhalt des Eingabefelds) ein Parameter (q) hinzugefügt wird.
Die PHP-Datei
Die Seite auf dem Server, die vom obigen JavaScript aufgerufen wird, ist eine PHP-Datei namens "livesearch.php".
Der Quellcode in "livesearch.php" durchsucht eine XML-Datei nach Titeln, die dem Suchstring entsprechen und gibt das Ergebnis zurück:
<?php
$xmlDoc=neues DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
// den q-Parameter von der URL abrufen
$q=$_GET["q"];
//alle Links aus der XML-Datei suchen, wenn Länge von q>0
if (strlen($q)>0)
{
$hint="";
for($i=0; $i<($x->Länge); $i++) {
$y=$x->item($i)->getElementsByTagName('title');
$z=$x->item($i)->getElementsByTagName('url');
if ($y->item(0)->nodeType==1) {
//finde einen Link, der dem Suchtext entspricht
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>";
} anders {
$hinweis=$hinweis . "<br /><a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}
// Ausgabe auf "kein Vorschlag" setzen, wenn kein Hinweis gefunden wurde
// oder auf die richtigen Werte
if ($hint=="") {
$response="kein Vorschlag";
}
anders {
$antwort=$hinweis;
}
// die Antwort ausgeben
echo $antwort;
?>
Wenn Text vom JavaScript gesendet wird (strlen($q) > 0), passiert Folgendes:
Laden Sie eine XML-Datei in ein neues XML-DOM-Objekt
Durchlaufen Sie alle <title>-Elemente, um Übereinstimmungen mit dem vom JavaScript gesendeten Text zu finden
Setzt die richtige URL und den richtigen Titel in der Variablen "$response".
Wenn mehr als eine Übereinstimmung gefunden wird, werden alle Übereinstimmungen zur Variablen hinzugefügt
Wenn keine Übereinstimmungen gefunden werden, wird die Variable $response auf "kein Vorschlag" gesetzt.