Pb moteur de recherche

Bonjour,

J'ai recuperé un code pour faire un moteur de recherche, mais je n'arrive pas a afficher le menu deroulant qui est sencé apparaitre.

Voicie mes fichiers :
XHRConnection.js

Code:

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
 
// + --------------------------------------------------------------------------------------
// + XHRConnection
// + V1.3
// + Thanh Nguyen, http://www.sutekidane.net
// + 20.10.2005
// + http://creativecommons.org/licenses/by-nc-sa/2.0/fr/deed.fr
// + --------------------------------------------------------------------------------------
function XHRConnection() {
 
	// + ----------------------------------------------------------------------------------
	var conn = false;
	var debug = false;
	var datas = new String();
	var areaId = new String();
	// Objet XML
	var xmlObj;
	// Type de comportement au chargement du XML
	var xmlLoad;
 
	// + ----------------------------------------------------------------------------------
	try {
		conn = new XMLHttpRequest();		
	}
	catch (error) {
		if (debug) { alert('Erreur lors de la tentative de création de l\'objet \nnew XMLHttpRequest()\n\n' + error); }
		try {
			conn = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (error) {
			if (debug) { alert('Erreur lors de la tentative de création de l\'objet \nnew ActiveXObject("Microsoft.XMLHTTP")\n\n' + error); }
			try {
				conn = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch (error) {
				if (debug) { alert('Erreur lors de la tentative de création de l\'objet \nnew ActiveXObject("Msxml2.XMLHTTP")\n\n' + error); }
				conn = false;
			}
		}
	}
 
	// + ----------------------------------------------------------------------------------
	// + setDebugOff
	// + Désactive l'affichage des exceptions
	// + ----------------------------------------------------------------------------------
	this.setDebugOff = function() {
		debug = false;
	};
 
	// + ----------------------------------------------------------------------------------
	// + setDebugOn
	// + Active l'affichage des exceptions
	// + ----------------------------------------------------------------------------------
	this.setDebugOn = function() {
		debug = true;
	};
 
	// + ----------------------------------------------------------------------------------
	// + resetData
	// + Permet de vider la pile des données
	// + ----------------------------------------------------------------------------------
	this.resetData = function() {
		datas = new String();
		datas = '';
	};
 
	// + ----------------------------------------------------------------------------------
	// + appendData
	// + Permet d'empiler des données afin de les envoyer
	// + ----------------------------------------------------------------------------------
	this.appendData = function(pfield, pvalue) {
		datas += (datas.length == 0) ? pfield+ "=" + escape(pvalue) : "&" + pfield + "=" + escape(pvalue);
	};
 
	// + ----------------------------------------------------------------------------------
	// + setRefreshArea
	// + Indique quel elment identifié par id est valoris lorsque l'objet XHR reoit une réponse
	// + ----------------------------------------------------------------------------------
	this.setRefreshArea = function(id) {
		areaId = id;
	};
 
	// + ----------------------------------------------------------------------------------
	// + createXMLObject
	// + Méthode permettant de créer un objet DOM, retourne la réfrence
	// + Inspiré de: http://www.quirksmode.org/dom/importxml.html
	// + ----------------------------------------------------------------------------------
	this.createXMLObject = function() {
		try {
			 	xmlDoc = document.implementation.createDocument("", "", null);
				xmlLoad = 'onload';
		}
		catch (error) {
			try {
				xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
				xmlLoad = 'onreadystatechange ';
			}
			catch (error) {
				if (debug) { alert('Erreur lors de la tentative de création de l\'objet XML\n\n'); }
				return false;
			}
		}
		return xmlDoc;
	}
 
	// + ----------------------------------------------------------------------------------
	// + Permet de définir l'objet XML qui doit être valorisé lorsque l'objet XHR reoit une réponse
	// + ----------------------------------------------------------------------------------
	this.setXMLObject = function(obj) {
		if (obj == undefined) {
				if (debug) { alert('Paramètre manquant lors de l\'appel de la méthode setXMLObject'); }
				return false;
		}
		try {
			//xmlObj = this.createXMLObject();
			xmlObj = obj;
		}
		catch (error) {
				if (debug) { alert('Erreur lors de l\'affectation de l\'objet XML dans la méthode setXMLObject'); }
		}
	}
 
	// + ----------------------------------------------------------------------------------
	// + loadXML
	// + Charge un fichier XML
	// + Entrées
	// + 	xml			String		Le fichier XML à charger
	// + ----------------------------------------------------------------------------------
	this.loadXML = function(xml, callBack) {
		if (!conn) return false;
		// Chargement pour alimenter un objet DOM
		if (xmlObj && xml) {
			if (typeof callBack == "function") {
				if (xmlLoad == 'onload') {
					xmlObj.onload = function() {
						callBack(xmlObj);
					}
				}
				else {
					xmlObj.onreadystatechange = function() {
						if (xmlObj.readyState == 4) callBack(xmlObj)
					}
				}
			}
			xmlObj.load(xml);
			return;
		}		
	}
 
	// + ----------------------------------------------------------------------------------
	// + sendAndLoad
	// + Connexion à la page désirée avec envoie des données, puis mise en attente de la réponse
	// + Entrées
	// + 	Url			String		L'url de la page à laquelle l'objet doit se connecter
	// + 	httpMode		String		La méthode de communication HTTP : GET, HEAD ou POST
	// + 	callBack		Objet		Le nom de la fonction de callback
	// + ----------------------------------------------------------------------------------
	this.sendAndLoad = function(Url, httpMode, callBack) {
		httpMode = httpMode.toUpperCase();
		conn.onreadystatechange = function() {
			if (conn.readyState == 4 && conn.status == 200) {
				// Si une fonction de callBack a été définie
				if (typeof callBack == "function") {
					callBack(conn);
					return;
				}
				// Si une zone destinée à récupérer le résultat a été définie
				else if (areaId.length > 0){
					try {
						document.getElementById(areaId).innerHTML = conn.responseText;
					}
					catch(error) {
						if (debug) { alert('Echec, ' + areaId + ' n\'est pas un objet valide'); }
					}
					return;
				}
			}
		};
		switch(httpMode) {
			case "GET":
				try {
					Url = (datas.length > 0) ? Url + "?" + datas : Url;
					conn.open("GET", Url);
					conn.send(null);
				}
				catch(error) {
					if (debug) { alert('Echec lors de la transaction avec ' + Url + ' via la méthode GET'); }
					return false;
				}
			break;
			case "POST":
				try {
					conn.open("POST", Url); 
					conn.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
					conn.send(datas);
				}
				catch(error) {
					if (debug) { alert('Echec lors de la transaction avec ' + Url + ' via la mthode POST'); }
					return false;
				}
			break;
			default :
				return false;
			break;
		}
		return true;
	};
	return this;
}

aaa.php

Code:

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<html>
    <head>
        <title>Test d'autocompletion</title>
		<link rel="stylesheet" type="text/css" href="styles.css">
		<script type="text/javascript" src="XHRConnection.js"></script>
 
		<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 = '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>
 
    </head>
    <body>
 
<form id="formulaire" action="aaa.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:

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
<?php require_once('../Connections/openDB.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 `generale`
               WHERE `num_generale` like '" . $_REQUEST["foo"] . "%'
               ORDER BY `num_generale` ASC";
 
          $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->num_generale) . ".html\" />";
               }
 
          }
     }
     else {
          $xml = "<resultats nb=\"0\">";
     }
 
 
 
 
 
     $xml .= "\n</resultats>";
     echo utf8_encode($xml);
?>

styles.css

Code:

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
46
47
48
49
50
51
52
53
54
55
56
57
58
#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;
}

Quelqu'un pourrait-il m'aidé et m'expliqué, je suis débutant dans cette partie ?