[AJAX] Tuto : Moteur de recherche

**Space Cowboy** · 27/07/2007, 12h23

http://www.sutekidane.net/blog/creer...st-et-php.html

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

**Space Cowboy** · 27/07/2007, 13h12

codejava.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// 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);
}

Config.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<?php
        mysql_connect('localhost', 'root', 'MOTDEPASSE');
        mysql_select_db('recherche_ajax');
 
?>

form.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<?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>

search.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?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);
?>

La table :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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, 0x426c61626c7a6c6971686466206c736a66730d0a6673640d0a660d0a73660d0a730d0a660d0a73660d0a73640d0a6673646673646673646673660d0a),
	(2, '2007-07-27 12:00:29', 0x4e6f6d32, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a71640d0a7173),
	(3, '2007-07-27 12:00:38', 0x416f686f686f68, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a71640d0a7173),
	(4, '2007-07-27 12:00:51', 0x4168616861686168, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a71640d0a7173),
	(5, '2007-07-27 12:01:01', 0x41686168616861, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a71640d0a7173),
	(6, '2007-07-27 12:01:11', 0x4368616d7032, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a71640d0a7173),
	(7, '2007-07-27 12:01:21', 0x4d706f6c736471, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a71640d0a7173);
*/

Il me manquais le fichier http://xhrconnection.sutekidane.net/...RConnection.js ...

Ce n'est pas mieux avec.

**mikaoul** · 27/07/2007, 21h44

Salut,

Peux-tu en dire plus sur ton problème ? Qu'est-ce qui bloque ? Où ça bloque ?
Qu'est-ce qui marche ?

**Space Cowboy** · 08/08/2007, 15h33

Rien ne s'affiche, la requête est bonne et je n'ai pas touché au code d'origine.

**mikaoul** · 08/08/2007, 16h46

Essaie de mettre une alert comme ça:
Dans ta fonction afficherResultat

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
...
if(tabResult.length>0)
 alert("affichage");
else
  alert("rien à afficher");

Histoire de voir s'il y a bien une réponse. Normalement tu devrais voir "Affichage" car ta requète est bonne.
Dans ce cas essaie d'afficher quelque chose dans ta zone de résultat:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
document.getElementById('zoneResultats').style.visibility= "visible";
document.getElementById('zoneResultats').innerHTML = "Ca marche";

Une question, tu utilises quel navigateur ? Avec Firefox, tu peux voir dans la console s'il y a des erreurs, tu peux également installer l'extension firebug qui te permet de suivre ce qui se passe lorsque tu utilises Ajax.