Exemple PHP - Recherche en Direct AJAX
AJAX peut être utilisé pour créer des recherches plus conviviales et interactives.
Recherche en Direct AJAX
L'exemple suivant démontre une recherche en direct, où vous obtenez des résultats pendant que vous tapez.
La recherche en direct présente de nombreux avantages par rapport à la recherche traditionnelle :
- Les résultats s'affichent au fur et à mesure que vous tapez
- Les résultats se restreignent à mesure que vous continuez à taper
- Si les résultats deviennent trop restreints, supprimez des caractères pour voir un résultat plus large
Recherchez une page de formation-ti.org dans le champ de saisie ci-dessous :
Les résultats de l'exemple ci-dessus se trouvent dans un fichier XML ( links.xml ). Pour rendre cet exemple simple et concis, seuls six résultats sont disponibles.
Exemple Expliqué - La Page HTML
Lorsqu'un utilisateur tape un caractère dans le champ de saisie ci-dessus, la fonction "showResult()" est exécutée. Cette fonction est déclenchée par l'événement "onkeyup" :
<html>
<head>
<script>
function showResult(str) {
if (str.length==0) {
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
var xmlhttp=new 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>
<body>
<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html> Explication du code source :
Si le champ de saisie est vide (str.length==0), la fonction efface le contenu de l'espace réservé de recherche en direct et quitte la fonction.
Si le champ de saisie n'est pas vide, la fonction showResult() exécute ce qui suit :
- Créer un objet XMLHttpRequest
- Créer la fonction à exécuter lorsque la réponse du serveur est prête
- Envoyer la requête à un fichier sur le serveur
- Remarquez qu'un paramètre (q) est ajouté à l'URL (avec le contenu du champ de saisie)
Le Fichier PHP
La page sur le serveur appelée par le JavaScript ci-dessus est un fichier PHP nommé "livesearch.php".
Le code source dans "livesearch.php" recherche un fichier XML pour des titres correspondant à la chaîne de recherche et renvoie le résultat :
<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//obtenir le paramètre q de l'URL
$q=$_GET["q"];
//rechercher tous les liens du fichier xml si la longueur de 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) {
//trouver un lien correspondant au texte de recherche
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>";
}
}
}
}
}
// Définir la sortie sur "aucune suggestion" si aucun indice n'a été trouvé
// ou sur les valeurs correctes
if ($hint=="") {
$response="aucune suggestion";
} else {
$response=$hint;
}
//sortir la réponse
echo $response;
?> S'il y a du texte envoyé depuis le JavaScript (strlen($q) > 0), ce qui suit se produit :
- Charger un fichier XML dans un nouvel objet XML DOM
- Boucler à travers tous les éléments <title> pour trouver des correspondances avec le texte envoyé depuis le JavaScript
- Définit l'url et le titre corrects dans la variable "$response". Si plus d'une correspondance est trouvée, toutes les correspondances sont ajoutées à la variable
- Si aucune correspondance n'est trouvée, la variable $response est définie sur "aucune suggestion"