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 illustre une recherche en direct, où vous obtenez des résultats de recherche pendant que vous tapez.
La recherche en direct présente de nombreux avantages par rapport à la recherche traditionnelle :
- Les résultats sont affichés au fur et à mesure que vous tapez
- Les résultats se rétrécissent au fur et à mesure que vous continuez à taper
- Si les résultats deviennent trop étroits, supprimez des caractères pour afficher un résultat plus large
Recherchez une page W3Schools 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 petit et simple, seuls six résultats sont disponibles.
Exemple expliqué - La page HTML
Lorsqu'un utilisateur saisit un caractère dans le champ de saisie ci-dessus, la fonction "showResult()" est exécutée. La 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é livesearch 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 demande vers un fichier sur le serveur
- Notez 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 appelé "livesearch.php".
Le code source de "livesearch.php" recherche dans un fichier XML les titres correspondant à la chaîne de recherche et renvoie le résultat :
<?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>";
}
}
}
}
}
// Set output to "no suggestion" if no hint was found
// or to the correct values
if ($hint=="") {
$response="no suggestion";
}
else {
$response=$hint;
}
//output the response
echo $response;
?>
Si du texte est envoyé depuis le JavaScript (strlen($q) > 0), voici ce qui se passe :
- Charger un fichier XML dans un nouvel objet DOM XML
- Parcourez tous les éléments <title> pour trouver des correspondances à partir du texte envoyé par JavaScript
- Définit l'URL et le titre corrects dans la variable "$response". Si plusieurs correspondances sont trouvées, toutes les correspondances sont ajoutées à la variable
- Si aucune correspondance n'est trouvée, la variable $response est définie sur "aucune suggestion"