1. Payes ton code
Vous allez voir, c’est en fait très simple à mettre en place. Voici tout d’abord le formulaire :
<form id="formulaire" action="index.php" method="post">
<fieldset>
<p>
<label for="foo">Saisissez les chaines à rechercher dans le
champ de formulaire ci-desous :</label>
<input type="text" name="foo" id="foo" value=""
onkeyup="loadData();" />
</p>
<ul id="zoneResultats" style="visibility: hidden;"></ul>
<p>
Texte à placer pour tester que les réponses s'affichent par
dessus... Lorem ipsum ...
</p>
</fieldset>
</form>
Voici le code javascript dont vous aurez besoin :
<script type="text/javascript">
// Déclaration de la fonction de Callback
// +
--------------------------------------------------------------------------------
--
// + afficherResultats
// + Affiche ou non le conteneur en fonction du résultat de la recherche
// +
--------------------------------------------------------------------------------
--
function afficherResultats(obj) {
// Construction des noeuds
var tabResult = obj.responseXML.getElementsByTagName('resultat');
document.getElementById('zoneResultats').innerHTML = '';
if (tabResult.length > 0) {
// On définit la hauteur de la liste en fonction du nombre de
rsultats et de la hauteur de ligne
var hauteur = tabResult.length * 22;
with(document.getElementById('zoneResultats').style) {
visibility = 'visible';
height = hauteur + 'px';
};
for (var i = 0; i < tabResult.length; i++) {
resultat = tabResult.item(i);
var egt = document.createElement('li');
var lnk = document.createElement('a');
var texte =
document.createTextNode(resultat.getAttribute('titre'));
lnk.appendChild(texte);
lnk.setAttribute('href', resultat.getAttribute('url'));
lnk.setAttribute('title',
resultat.getAttribute('titre'));
egt.appendChild(lnk);
document.getElementById('zoneResultats').appendChild(egt);
}
}
else {
document.getElementById('zoneResultats').style.visibility =

2. 'hidden';
}
}
// Déclaration de la fonction qui lance la recherche
function loadData() {
// Création de l'objet
var XHR = new XHRConnection();
XHR.appendData("foo", document.getElementById('foo').value);
// On soumet la requête
// Signification des paramètres:
// + On indique à l'objet qu'il faut appeler le fichier search.php
// + On utilise la méthode POST, adaptée l'envoi d'information
// + On indique quelle fonction appeler lorsque l'opération a été
effectuée
XHR.sendAndLoad("search.php", "POST", afficherResultats);
}
</script>
Coté serveur, nous avons ce petit script PHP :
[php]
header("Pragma: no-cache");
header("Expires: 0");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Content-type: application/xml");
if(!empty($_REQUEST["foo"])) {
$rqListBillet = "
SELECT *
FROM `blog_blabla`
WHERE `titre` like '" . $_REQUEST["foo"] . "%'
ORDER BY `date_parution` DESC";
$rsListBillet = mysql_query($rqListBillet);
$xml = "";
if (mysql_num_rows($rsListBillet) > 0) {
while ($billet = mysql_fetch_object($rsListBillet)) {
$xml .= "ntitre) . "" url="/blog/" . $billet->url_page . ".html" />";
}
}
}
else {
$xml = "";
}
$xml .= "n";
echo utf8_encode($xml);
[/php]