J'aimerais bien faire la même chose, mais comme a chaque totorial, ca ne fonctionne pas du premier coup.
Si vous pouviez me donner un coup de main.
j'ai tout mis dans un .rar, il faut décompresser, créer la table, renseigner le mot de passe et lancer la page form.php
http://cowboy.bdd.free.fr/Externe/Recherche AJAX.rar
codejava.js :
CODE
// JavaScript Document
// 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 = '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);
}
// 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 = '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);
}
Config.php
CODE
<?php
mysql_connect('localhost', 'root', 'MOTDEPASSE');
mysql_select_db('recherche_ajax'); ?>
mysql_connect('localhost', 'root', 'MOTDEPASSE');
mysql_select_db('recherche_ajax'); ?>
form.php
CODE
<?php
require_once('CConnexion.php');
require_once('config.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title> <style type="text/css" media="screen">
#formulaire { padding:5px; margin:10px 0 0 10px; border:1px dashed #999; width:590px; }
#formulaire fieldset { border:0; margin:0; padding:0; }
#formulaire fieldset label { display:block; }
#formulaire legend { margin:0 0 5px; }
#formulaire p { display:block; padding:5px 0 0; margin:10px 0 0; width:580px;}
#zoneResultats { border:1px solid #000; background-color:#fff; display:block; overflow:auto; margin:0;padding:0; position:absolute; width:400px;}
#zoneResultats li { background:#fff;display:block; margin:0; padding:0; }
#zoneResultats li a{ display:block; padding:2px; text-decoration:none;}
#zoneResultats li a:hover{ background-color:#ffffc0; }
input { margin:0; }
</style> </head>
<body>
<script type="text/javascript" src="codejava.js"></script> <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>
</body>
</html>
require_once('CConnexion.php');
require_once('config.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title> <style type="text/css" media="screen">
#formulaire { padding:5px; margin:10px 0 0 10px; border:1px dashed #999; width:590px; }
#formulaire fieldset { border:0; margin:0; padding:0; }
#formulaire fieldset label { display:block; }
#formulaire legend { margin:0 0 5px; }
#formulaire p { display:block; padding:5px 0 0; margin:10px 0 0; width:580px;}
#zoneResultats { border:1px solid #000; background-color:#fff; display:block; overflow:auto; margin:0;padding:0; position:absolute; width:400px;}
#zoneResultats li { background:#fff;display:block; margin:0; padding:0; }
#zoneResultats li a{ display:block; padding:2px; text-decoration:none;}
#zoneResultats li a:hover{ background-color:#ffffc0; }
input { margin:0; }
</style> </head>
<body>
<script type="text/javascript" src="codejava.js"></script> <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>
</body>
</html>
scriptPHP.php
CODE
<?php
require_once('CConnexion.php');
require_once('config.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 `recherche_ajax`
WHERE `ajax_nom` like '" . $_REQUEST["foo"] . "%'
ORDER BY `ajax_nom` DESC";
$rsListBillet = mysql_query($rqListBillet);
$xml = "<resultats nb=\"" . mysql_num_rows($rsListBillet) . "\">";
if (mysql_num_rows($rsListBillet) > 0)
{
while ($billet = mysql_fetch_object($rsListBillet))
{
$xml .= "\n<resultat titre=\"" . str_replace('"', "", $billet->titre) . "\" url=\"/blog/" . $billet->url_page . ".html\" />";
}
}
}
else
{
$xml = "<resultats nb=\"0\">";
}
$xml .= "\n</resultats>";
echo utf8_encode($xml);
?>
require_once('CConnexion.php');
require_once('config.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 `recherche_ajax`
WHERE `ajax_nom` like '" . $_REQUEST["foo"] . "%'
ORDER BY `ajax_nom` DESC";
$rsListBillet = mysql_query($rqListBillet);
$xml = "<resultats nb=\"" . mysql_num_rows($rsListBillet) . "\">";
if (mysql_num_rows($rsListBillet) > 0)
{
while ($billet = mysql_fetch_object($rsListBillet))
{
$xml .= "\n<resultat titre=\"" . str_replace('"', "", $billet->titre) . "\" url=\"/blog/" . $billet->url_page . ".html\" />";
}
}
}
else
{
$xml = "<resultats nb=\"0\">";
}
$xml .= "\n</resultats>";
echo utf8_encode($xml);
?>
La table :
CODE
CREATE TABLE `recherche_ajax` (
`ajax_id` int(11) NOT NULL auto_increment,
`ajax_date` datetime NOT NULL,
`ajax_nom` varchar(512) collate utf8_bin NOT NULL,
`ajax_chaine` longtext collate utf8_bin NOT NULL,
PRIMARY KEY (`ajax_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=8;
-- -- Contenu de la table `recherche_ajax`
--
INSERT INTO `recherche_ajax` (`ajax_id`, `ajax_date`, `ajax_nom`, `ajax_chaine`) VALUES (1, '2007-07-27 12:00:15', 0x4e6f6d31, 0x426c61626c7a6c6971686466206c736a66730d0a6673640d0a660d0a73660d0a730d0a660d0a73
660d0a73640d0a6673646673646673646673660d0a),
(2, '2007-07-27 12:00:29', 0x4e6f6d32, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a
71640d0a7173),
(3, '2007-07-27 12:00:38', 0x416f686f686f68, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a
71640d0a7173),
(4, '2007-07-27 12:00:51', 0x4168616861686168, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a
71640d0a7173),
(5, '2007-07-27 12:01:01', 0x41686168616861, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a
71640d0a7173),
(6, '2007-07-27 12:01:11', 0x4368616d7032, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a
71640d0a7173),
(7, '2007-07-27 12:01:21', 0x4d706f6c736471, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a
71640d0a7173);
*/
`ajax_id` int(11) NOT NULL auto_increment,
`ajax_date` datetime NOT NULL,
`ajax_nom` varchar(512) collate utf8_bin NOT NULL,
`ajax_chaine` longtext collate utf8_bin NOT NULL,
PRIMARY KEY (`ajax_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=8;
-- -- Contenu de la table `recherche_ajax`
--
INSERT INTO `recherche_ajax` (`ajax_id`, `ajax_date`, `ajax_nom`, `ajax_chaine`) VALUES (1, '2007-07-27 12:00:15', 0x4e6f6d31, 0x426c61626c7a6c6971686466206c736a66730d0a6673640d0a660d0a73660d0a730d0a660d0a73
660d0a73640d0a6673646673646673646673660d0a),
(2, '2007-07-27 12:00:29', 0x4e6f6d32, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a
71640d0a7173),
(3, '2007-07-27 12:00:38', 0x416f686f686f68, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a
71640d0a7173),
(4, '2007-07-27 12:00:51', 0x4168616861686168, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a
71640d0a7173),
(5, '2007-07-27 12:01:01', 0x41686168616861, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a
71640d0a7173),
(6, '2007-07-27 12:01:11', 0x4368616d7032, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a
71640d0a7173),
(7, '2007-07-27 12:01:21', 0x4d706f6c736471, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a
71640d0a7173);
*/
Sujet posté ici, mais aucune réponse ...