PHP-Beispiele -AJAX-Live-Suche

AJAX kann Benutzern eine benutzerfreundlichere und interaktivere Sucherfahrung bieten.

AJAX-Live-Suche

Im folgenden Beispiel demonstrieren wir eine Live-Suche. Sie können Suchergebnisse erhalten, während Sie tippen.

Die Live-Suche hat viele Vorteile im Vergleich zur traditionellen Suche:

  • Beim Eingeben von Daten werden passende Ergebnisse angezeigt
  • Wenn Sie weiter Daten eingeben, werden die Ergebnisse gefiltert
  • Wenn es zu wenige Ergebnisse gibt, löschen Sie Zeichen, um eine breitere Auswahl zu erhalten

Geben Sie "HTML" in das Textfeld unten ein, um nach Seiten zu suchen, die HTML enthalten:

Die Ergebnisse im obigen Beispiel werden in einer XML-Datei () nachgeschlagen. Um dieses Beispiel klein und einfach zu halten, stellen wir nur 6 Ergebnisse bereit.

Beispielerklärung - HTML-Seite

Wenn der Benutzer Zeichen in das Eingabefeld oben eingibt, wird die Funktion "showResult()" ausgeführt. Diese Funktion wird durch das "onkeyup"-Ereignis ausgelöst:

<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>

Erklärung des Quellcodes:

Wenn das Eingabefeld leer ist (str.length==0), löscht die Funktion den Inhalt des Platzhalters livesearch und verlässt die Funktion.

Wenn das Eingabefeld nicht leer ist, führt showResult() die folgenden Schritte aus:

  • Erstellen Sie ein XMLHttpRequest-Objekt
  • Erstellen einer Funktion, die ausgeführt wird, wenn die Serverantwort bereit ist
  • Senden einer Anfrage an die Datei auf dem Server
  • Beachten Sie den Parameter (q), der am Ende der URL hinzugefügt wird (der den Inhalt des Eingabefelds enthält)

PHP-Datei

Die oben von JavaScript aufgerufene Serverseite ist eine PHP-Datei namens "livesearch.php".

Der Quellcode in "livesearch.php" durchsucht die XML-Datei nach Titeln, die mit der Suchzeichenfolge übereinstimmen, und gibt die Ergebnisse zurück:

<?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 irgendeinen Text sendet (d. h., strlen($q) > 0), geschieht Folgendes:

  • Laden Sie die XML-Datei in ein neues XML-DOM-Objekt
  • Durchlaufen Sie alle <title>-Elemente, um Übereinstimmungen für den von JavaScript gesendeten Text zu finden
  • Legen Sie die korrekte URL und den Titel in die Variable "$response" fest. Wenn mehr als eine Übereinstimmung gefunden wird, werden alle Übereinstimmungen zur Variable hinzugefügt.
  • Wenn keine Übereinstimmung gefunden wird, setzen Sie die Variable $response auf "no suggestion".
Weitere Erweiterungen