Les fichiers nécessaires

Nous auront ici besoin de 2 fichiers, la page recherche.php avec le formulaire et la page resultat.php qui effectuera notre dite recherche.

resultat.php

le code

<?php
//--------------------------------------------------------------
//-----------------------RESULTATS LIVE-------------------------
//--------------------------------------------------------------

//CONNECTION SERVEUR SQL
mysql_connect("localhost", "user", "password");
mysql_select_db("base");

// RECHERCHE
$rech=$_GET["rech"];
$result = mysql_query('SELECT * FROM sites WHERE rech LIKE "%'.$rech.'%"');
if(mysql_num_rows($result)>=1){
$i=1;
while(mysql_fetch_array($result)){
echo "Resultat n°".$i." : "'.$result["nom"].'" à l'adresse : <a href="'.$result["adresse"].'">"'.$result["adresse"].'"</a>";
$i++;
}

}else{
echo "Pas de résultats";
}
?>

l'explication

Rien de bien compliquer au demeurant un requète de recherche classique, on notera le caractère % utilisé comme joker.

recherche.php

On crée maintenant notre page recherche.php avec un formulaire tout simple (enfin presque)

le code

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>Recherche AJAX</title>
</head>
<body>
<form action="">
<input type="text" name="rech" onKeyUp="cherche(this.value)" />
<div id="resultbox"></div>
</form>
</body>
</html>

l'explication

Un formulaire tout simple donc, le point remarquable, l'evenement onKeyUp qui lance la fonction javascript "cherche" avec le contenu du champ en paramètre à chaque lettre tapée.


On envoie notre fonction javascript

le code

<script type="text/javascript">
function writediv(texte)
     {
     document.getElementById('resultbox').innerHTML = texte;
     }

function cherche(rech)
     {
     if(texte = file('http://www.jkconception.com/scripts/resultat.php?rech='+escape(rech))){
          writediv(texte);
     }else{
          writediv('');
     }
     }

function file(fichier)
     {
     if(window.XMLHttpRequest) // FIREFOX
          xhr_object = new XMLHttpRequest();
     else if(window.ActiveXObject) // IE
          xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
     else
          return(false);
     xhr_object.open("GET", fichier);
     xhr_object.send(null);
     if(xhr_object.readyState == 4) return(xhr_object.responseText);
     else return(false);
     }
</script>

l'explication

writediv :La fonction écrit ce qu'on lui passe en paramè dans le div dont l'ID est "resultbox"

cherche :Recupère le contenu du champ "rech" et envoie la requê par le biais de la fonction file

file :Celle qui mérite peut-être le plus d'explications.

En premier lieu, on crée un objet xhr, par le bias d'un activeX pour IE (jusqu'à IE6) ou grâce à la fonction native (xhr_object = new XMLHttpRequest()) des autres navigateurs

Ensuite on emploie la méthodes open où l'on indique la méthode de la requète (ici GET) et l'url de notre script php (donné par la fonction cherche).

On continue avec la méthode send à null puisque l'on est en GET

Enfin on attend que la requète ait été éxécutée (readyState=4) pour afficher la reponse au format texte (return(xhr_object.responseText)).

Voilà pour note petit script AJAX, vous pouvez souffler.

À noter enfin que ce script n'est qu'une simple variante (avec un poil plus d'explications) de celui que vous pouvez trouvez sur l'excellent Editeur Javascript