Des exemples de recherche en temps réel PHP AJAX
AJAX peut fournir aux utilisateurs une expérience de recherche plus convivial, plus interactif.
AJAX Live Search
Dans les exemples suivants, nous allons démontrer une recherche en temps réel, vous pouvez obtenir des résultats de recherche que vous tapez des données en même temps.
Recherche en temps réel avec la recherche traditionnelle, par rapport à de nombreux avantages:
- Lorsque vous tapez des données, il affiche le résultat d'un match
- Lorsque continuer la saisie de données, les résultats de filtre
- Si le résultat est trop petit, vous pouvez supprimer le caractère d'obtenir une plus large gamme
Entrez dans la zone de texte ci-dessous "HTML", les recherches contenant la page HTML:
Des exemples des résultats ci - dessus dans un fichier XML ( links.xml à trouver) dans. Pour cet exemple, petit et simple, nous offrons seulement 6 résultats.
Exemples expliquent - page HTML
Quand un utilisateur dans le caractère de zone de saisie ci-dessus exécute "showResult ()" fonction. Cette fonction consiste à "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>
Source expliqué:
Si la zone de saisie est vide (str.length == 0), cette fonction effacer le contenu de l'espace réservé Livesearch et quitter la fonction.
Si la boîte d'entrée est vide, alors showResult () effectue les étapes suivantes:
- Créer un objet XMLHttpRequest
- Créer la fonction lorsque le serveur est prêt à effectuer la réponse
- Dossier sur le serveur pour envoyer des demandes
- S'il vous plaît noter que l'ajout de (contient la boîte d'entrée) la fin du paramètre d'URL (q)
Fichier PHP
Les serveurs ci-dessus par le biais de JavaScript appelant cette page est appelé fichier PHP "de livesearch.php".
recherche de code source des fichiers XML qui correspondent au titre de la chaîne de recherche "Livesearch.php", et renvoie le résultat:
<?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;
?>
Si JavaScript pour envoyer un texte (ie, strlen ($ q) 0>), se produit:
- Charger le fichier XML pour le nouvel objet DOM XML
- Grâce à tout élément <title> pour trouver le texte correspondant à la prédication JavaScript
- Définissez l'URL correcte et le titre variable "$ de réponse". Si elle trouve plus d'un match, tous les matchs seront ajoutés à la variable.
- Si aucune correspondance est trouvée, mettre la variable à «aucune suggestion" $ de réponse.