[AJAX] liste d'autocompletion besoin d'aide

Version imprimable

05/05/2010, 11h05
cyril07

[AJAX] liste d'autocompletion besoin d'aide

bonjour voila j'essaye de faire une liste deroulante qui se complete seule j'ai suivi ce tuto ci :http://dcabasson.developpez.com/arti...ion-pas-a-pas/

mais je n'arrive pas a le faire fonctionner dans la mesure ou il n'y a aucun sugestion qui apparait
même en copiant les sources cela ne fonctionne pas

Merci de votre aide
05/05/2010, 11h14
E.Bzz

Bonjour,
il faudrait nous montrer ton code à toi : le HTML généré des select, les fonctions javascript concernées par le traitement Ajax ainsi que le PHP qui génère la réponse Ajax ...

A+
05/05/2010, 11h23
cyril07

Citation:

Envoyé par E.Bzz

Bonjour,
il faudrait nous montrer ton code à toi : le HTML généré des select, les fonctions javascript concernées par le traitement Ajax ainsi que le PHP qui génère la réponse Ajax ...

A+

merci ppour ta reponse

ben en fait je veux juste utiliser les sources je n'ai a proprement dit pas encore fait de code je veux déjà faire marcher les sources qui sont a telecharger en bas du tuto apres j'adapterait pour mon utilisation
05/05/2010, 15h21
cyril07

Faut t'il ajouter quelque chose de spécial pour que les sources marche
car sur internet cela marche mais en local ca veux pas
quelqu'un pourrai t-il tester chez lui si les sources sont fonctionnelles ?

Merci
05/05/2010, 15h42
E.Bzz

Tu as un serveur PHP ?
Toute la partie PHP n'est pas décrite dans le tuto : tu as adapté comment ?

Sinon, sur le principe : un tuto sert à apprendre, pas à être recopié ;)

A+
05/05/2010, 16h58
cyril07

oui j'ai un serveur php et la partie php est bien donnée jé bien dans la source tout les fichier
Merci
05/05/2010, 17h08
E.Bzz

Et donc "ça ne marche pas" de quelle manière ?
Une erreur Javascript ?
Laquelle et sur quelle ligne ?
As-tu vérifié que l'url appelée est générée correctement ?
Quelle est la réponse d'Ajax ?
Que se passe-t-il si tu tapes l'url appelée via Ajax directement dans la barre d'adresse du nav ?

Bref ... donne quelques éléments :mrgreen:

A+

Ben en fait y'a aucune erreur c'est juste que quand je rempli le champ j'ai pas de proposition

ensuite comment ca vérifié que l'url appelée est générée correctement ?

du coup je peut pas repondre aux autre questions

J'ai trouvé une autre maniere de faire une liste qui s'autocmplete avec un autre site et dont celle sont tirée d'un base je te met le code car maintenant j'aimerai qu'en fonction de ce que je clique sur la premiere liste deroulante la deuxieme s'affiche avec les resultats corespondants

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
<?php
	if(isset($_POST['chef'])){
	echo "chef 1 = ".$_POST['chef'];
 
		header('Content-type: text/html; charset=iso-8859-1');
		// on inclut la connexion
		mysql_connect('localhost', 'root', '');
		mysql_select_db('base_apli');
 
		// on fait la requête
		$sql = "SELECT Negociateur,Client,Id
				FROM apli
				WHERE Negociateur LIKE '%".$_POST['chef']."%'";
		$req = mysql_query($sql);
 
		$i = 0;
		echo '<ul class="contacts">';
		// on boucle sur tous les éléments
		while($autoCompletion = mysql_fetch_assoc($req)){
			echo '
			<li class="contact"><div class="nom">'.$autoCompletion['Negociateur'].'</div>
			<div class="prenom">
			<span class="informal">'.$autoCompletion['Client'].'</span>
			</div>
			</li>';
			// on s'arrête s’il y en a trop
			if (++$i >= 10)
				die('<li>...</li></ul>');
		}
		echo '</ul>';
		die();
	}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Une autocompletion avancée en AJAX</title>
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="lib/scriptaculous.js"></script>
<script type="text/javascript" src="lib/autocompletion.js"></script>
<style type="text/css">
body{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: justify;
	font-size: 12px;
	color: #565656;
}
 
img {
    border: none;
} 
 
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Autocompletion */
.update{
	position:absolute;
	width:250px;
	background-color:white;
	border:1px solid #888;
	margin:0px;
	padding:0px;
}
 
ul.contacts  {
	list-style-type: none;
	margin:0px;
	padding:0px;
	text-align: left;
}
ul.contacts li.selected { background-color: #ffb; cursor: pointer; }
li.contact {
	list-style-type: none;
	display:block;
	margin:0;
	padding:2px;
	height:32px;
}
li.contact div.image {
	float:left;
	width:32px;
	height:32px;
	margin-right:8px;
}
li.contact div.nom {
	font-weight:bold;
	font-size:12px;
	line-height:1.2em;
}
</style>
</head>
<body>
 
<br/>
<form action="?" method="post" onsubmit="return false;  ">
	<label for="chef">Chef : </label>
	<input type="input" name="chef" id="chef" value=""  />
	<div class="update" id="chef_update"></div>
	<input type="hidden" name="chef_id" id="chef_id" value="" /> 
</form>
<br/>
 
 
 
 
 
 
 
<?php if(isset($_POST['chef'])) {?>
<form action="?" method="post" onsubmit="return false; ">
	<label for="chef">Chef : </label>
	<input type="input" name="chef" id="chef" value="" onchange="go"/>
	<div class="update" id="chef_update"></div>
	<input type="hidden" name="chef_id" id="chef_id" value="" /> 
</form>
<?php }?>
 
 
Numéro de la personne avec son nom : <span id="chef_log"></span>
 
<script type="text/javascript">
new Ajax.Autocompleter ('chef',
						'chef_update',
						'autocompletion.php',
						{
							method: 'post',
							paramName: 'chef',
							afterUpdateElement: ac_return
						});
</script>
 
</body>
</html>

voila ce code est fonctionnel pour la deuxieme liste intuitive je me disait qu'un onchange ferait l'affaire mais comment le faire je pense le metre au niveau du input je l'ai deja mis d'ailleurs il redirige vers une fonction go qu'il faut que je fasse ou si ta une autre soluce

En tout cas Merci pour ton aide

06/05/2010, 09h08
E.Bzz

Citation:

Envoyé par E.Bzz

Que se passe-t-il si tu tapes l'url appelée via Ajax directement dans la barre d'adresse du nav ?

A+

je te met le code du fichier .javascript car je voit pas d'url dans le code

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
// retourne un objet xmlHttpRequest.
// méthode compatible entre tous les navigateurs (IE/Firefox/Opera)
function getXMLHTTP(){
  var xhr=null;
  if(window.XMLHttpRequest) // Firefox et autres
  xhr = new XMLHttpRequest();
  else if(window.ActiveXObject){ // Internet Explorer
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e1) {
        xhr = null;
      }
    }
  }
  else { // XMLHttpRequest non supporté par le navigateur
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
  }
  return xhr;
}
 
var _documentForm=null; // le formulaire contenant notre champ texte
var _inputField=null; // le champ texte lui-même
var _submitButton=null; // le bouton submit de notre formulaire
 
function initAutoComplete(form,field,submit){
  _documentForm=form;
  _inputField=field;
  _submitButton=submit;
  _inputField.autocomplete="off";
  creeAutocompletionListe();
  _currentInputFieldValue=_inputField.value;
  _oldInputFieldValue=_currentInputFieldValue;
  cacheResults("",new Array())
  // Premier déclenchement de la fonction dans 200 millisecondes
  setTimeout("mainLoop()",200)
}
 
var _oldInputFieldValue=""; // valeur précédente du champ texte
var _currentInputFieldValue=""; // valeur actuelle du champ texte
var _resultCache=new Object(); // mécanisme de cache des requetes
 
// tourne en permanence pour suggerer suite à un changement du champ texte
function mainLoop(){
  _currentInputFieldValue = _inputField.value;
  if(_oldInputFieldValue!=_currentInputFieldValue){
    var valeur=escapeURI(_currentInputFieldValue);
    var suggestions=_resultCache[_currentInputFieldValue];
    if(suggestions){ // la réponse était encore dans le cache
      metsEnPlace(valeur,suggestions)
    }else{
      callSuggestions(valeur) // appel distant
    }
    _inputField.focus()
  }
  _oldInputFieldValue=_currentInputFieldValue;
  setTimeout("mainLoop()",200); // la fonction se redéclenchera dans 200 ms
  return true
}
 
// echappe les caractère spéciaux
function escapeURI(La){
  if(encodeURIComponent) {
    return encodeURIComponent(La);
  }
  if(escape) {
    return escape(La)
  }
}
 
var _xmlHttp = null; //l'objet xmlHttpRequest utilisé pour contacter le serveur
var _adresseRecherche = "options.php" //l'adresse à interroger pour trouver les suggestions
 
function callSuggestions(valeur){
  if(_xmlHttp&&_xmlHttp.readyState!=0){
    _xmlHttp.abort()
  }
  _xmlHttp=getXMLHTTP();
  if(_xmlHttp){
    //appel à l'url distante
    _xmlHttp.open("GET",_adresseRecherche+"?debut="+valeur,true);
    _xmlHttp.onreadystatechange=function() {
      if(_xmlHttp.readyState==4&&_xmlHttp.responseXML) {
        var liste = traiteXmlSuggestions(_xmlHttp.responseXML)
        cacheResults(valeur,liste)
        metsEnPlace(valeur,liste)
      }
    };
    // envoi de la requete
    _xmlHttp.send(null)
  }
}
 
// Mecanisme de caching des réponses
function cacheResults(debut,suggestions){
  _resultCache[debut]=suggestions
}
 
// Transformation XML en tableau
function traiteXmlSuggestions(xmlDoc) {
  var options = xmlDoc.getElementsByTagName('option');
  var optionsListe = new Array();
  for (var i=0; i < options.length; ++i) {
    optionsListe.push(options[i].firstChild.data);
  }
  return optionsListe;
}
 
var _completeListe=null; // la liste contenant les suggestions
 
// création d'une div pour les suggestions
// méthode appellée à l'initialisation
function creeAutocompletionListe(){
  _completeListe=document.createElement("UL");
  _completeListe.id="completeDiv";
  document.body.appendChild(_completeListe);
}
 
function metsEnPlace(valeur, liste) {
  while(_completeListe.childNodes.length>0) {
    _completeListe.removeChild(_completeListe.childNodes[0]);
  }
  for (var i=0; i < liste.length; ++i) {
    var nouveauElmt = document.createElement("LI")
    nouveauElmt.innerHTML = liste[i]
    _completeListe.appendChild(nouveauElmt)
 
  }
}

06/05/2010, 09h57
E.Bzz

:koi:

Un indice : elle doit faire référence à une page "options.php" et contenir des paramètres nécessaire à ton traitement PHP ...

A+
06/05/2010, 10h25
cyril07

a ok et ben quand je met l'url d'option.php ca m'affiche tout les mots possibles
il n'y a pas d'erreur
chez toi ca marche rien quand copiant les sources ?