Recherche en direct AJAX et PHP

AJAX peut offrir aux utilisateurs une expérience de recherche plus conviviale et plus interactive.

Recherche en direct AJAX

Dans cet exemple AJAX, nous allons démontrer une recherche en temps réel.

La recherche en temps réel présente de nombreux avantages par rapport à la recherche traditionnelle :

  • Des résultats correspondants s'affichent lorsque vous saisissez des données
  • Les résultats sont filtrés au fur et à mesure que vous continuez à saisir des données
  • Si les résultats sont trop peu nombreux, supprimez des caractères pour obtenir une plage plus large

Recherchez des pages sur CodeW3C.com dans le champ de texte suivant

Cet exemple comprend quatre éléments :

  • Formulaire HTML simple
  • JavaScript
  • Page PHP
  • Document XML

Dans cet exemple, les résultats se trouvent dans un document XML (links.xml) où nous cherchons. Pour que cet exemple soit court et simple, nous ne fournissons que 8 résultats.

Formulaire HTML

Ceci est une page HTML. Elle contient un simple formulaire HTML, les styles CSS pour ce formulaire, et un lien vers le JavaScript :

<html>
<head>
<script src="livesearch.js"></script> 
<style type="text/css"> 
#livesearch
  { 
  margin:0px;
  width:194px; 
  }
#txt1
  { 
  margin:0px;
  } 
</style>
</head>
<body>
<form>
<input type="text" id="txt1" size="30"
onkeyup="showResult(this.value)"
<div id="livesearch"></div>
</form>
</body>
</html>

Explication de l'exemple - Formulaire HTML

Comme vous le voyez, la page HTML contient un simple formulaire HTML, avec un champ de texte nommé "txt1".

Voici comment fonctionne le formulaire :

  1. Lorsque l'utilisateur appuie sur une touche dans le champ de texte et la relâche, un événement est déclenché
  2. Lorsque l'événement est déclenché, la fonction nommée showResult() est exécutée
  3. Sous le formulaire, se trouve un élément <div> nommé "livesearch" qui sert de placeholder pour les données renvoyées par showResult()

JavaScript

Le code JavaScript est stocké dans un fichier "livesearch.js" connecté au document HTML :

var xmlHttp
function showResult(str)
{
if (str.length==0)
 { 
 document.getElementById("livesearch").
 innerHTML="";
 document.getElementById("livesearch").
 style.border="0px";
 retourner
 }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Le navigateur ne prend pas en charge les demandes HTTP")
 retourner
 }
var url="livesearch.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("livesearch").
 innerHTML=xmlHttp.responseText;
 document.getElementById("livesearch").
 style.border="1px solid #A5ACB2";
 } 
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
retourner xmlHttp;
}

Explication de l'exemple :

GetXmlHttpObject avec Requêtes AJAX et PHP Les exemples sont identiques.

Fonction showResult()

La fonction s'exécute à chaque fois qu'un caractère est saisi dans la zone de texte

Si il n'y a pas d'entrée dans le champ de texte (str.length == 0), la fonction met le champ de retour à vide et supprime toute bordure autour

Cependant, si il y a des entrées dans le champ de texte, la fonction exécute :

  1. Définir l'URL (nom de fichier) à envoyer au serveur
  2. Ajouter le paramètre (q) contenant le contenu de la zone de saisie à l'URL
  3. Ajouter un nombre aléatoire pour éviter que le serveur utilise le fichier de cache
  4. Appeler la fonction GetXmlHttpObject pour créer un objet XMLHTTP et informer cette fonction d'exécuter une fonction nommée stateChanged lors d'un changement déclenché
  5. Ouvrir l'objet XMLHTTP en utilisant l'URL fournie
  6. Envoi d'une requête HTTP au serveur

Fonction stateChanged()

Cette fonction est exécutée à chaque changement d'état de l'objet XMLHTTP.

Lorsque l'état devient 4 (ou "complete"), le texte de réponse est utilisé pour remplir le contenu du curseur txtHint et pour encadrer le champ de retour.

Page PHP

La page serveur appelée par le code JavaScript est le fichier PHP nommé "livesearch.php".

"livesearch.php" vérifie ce document XML "links.xml" qui contient les titres et les URL de certaines pages codew3c.com.

Ces codes recherchent les titres correspondant à la chaîne de recherche dans le fichier XML et renvoient les résultats sous forme d'HTML :

<?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>";
    }
   }
  }
 }
}
//Définir la sortie sur "no suggestion" si aucune suggestion n'a été trouvée
//ou aux valeurs correctes
if ($hint == "")
 {
 $response="no suggestion";
 }
else
 {
 $response=$hint;
 }
//Afficher la réponse
echo $response;
?>

Explication de l'exemple :

Si un texte est envoyé depuis JavaScript (strlen($q) > 0), il se produit :

  1. Un objet XML DOM PHP pour créer le fichier "links.xml"
  2. Parcourir tous les éléments "title" (nodetypes = 1) pour trouver le nom correspondant aux données transmises par JavaScript
  3. Trouver le link contenant le title correct, et le définir sur la variable "$response". Si plus d'une correspondance est trouvée, toutes les correspondances seront ajoutées à la variable
  4. Si aucune correspondance n'est trouvée, la variable $response est définie sur "no suggestion"
  5. $result est l'output envoyé au "livesearch" placeholder