Bonjour à tous,
Je commence juste l'Ajax, aussi ai-je pris le tuto d'autocomplétion proposé dans les tutos et je tente de l'adapter à mes besoins.
J'ai donc commencé par modifier la page PHP (plus facile pour moi...) pour qu'elle retourne une liste de client extraite de ma BDD
Bon jusque là tout fonctionnait plutot bien
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 header('Content-Type: text/xml;charset=utf-8'); require_once('../../../Connections/maConnexion.php'); mysql_select_db($database_maConnexion, $maConnexion); include("../../../class/listeTable.class.php"); $listeTC= new listeTable($maConnexion); $tabTabl=$listeTC->tabClients($_GET["annee"]); foreach($tabTabl as $table){ $query_rsClient ="SELECT ID, nom FROM ".$table." WHERE nom LIKE '".$_GET['debut']."%'"; $rsClient=@mysql_query($query_rsClient, $maConnexion); while($row_rsClient = mysql_fetch_assoc($rsClient)) { $liste[]=strtolower($row_rsClient['nom']); }; mysql_free_result($rsClient); }; $liste=array_unique($liste); echo(utf8_encode("<?xml version='1.0' encoding='UTF-8' ?><options>")); if (isset($_GET['debut'])) { $debut = utf8_decode($_GET['debut']); } else { $debut = ""; } $debut = strtolower($debut); function generateOptions($debut,$liste) { foreach ($liste as $element) { if (substr($element, 0, strlen($debut))==$debut) { echo(utf8_encode('<option>'.strtolower($element).'</option>')); } } } generateOptions($debut,$liste); echo("</options>"); ?>
ensuite je cherche à modifier encore un peu en faisant en sorte que soit transmis à cette page l'année (inclus dans le nom de la table) dans laquelle elle doit chercher.
j'ai donc modifié un peu ma fonction initAutoComplete et son appel dans le window.onload ce qui donne :
ou document.getElementById('test') est un champs masqué mis à jour par l'évenement onclick sur des boutons radio
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 <script type="text/javascript"> window.onload = function(){initAutoComplete(document.getElementById('form1'), document.getElementById('nom'),document.getElementById('bouton-submit'),document.getElementById('test'))}; </script>
et voici enfin le javascript modifié qui fonctionne si l'année est choisie avant de saisir les lettres dans le champs de saisie ou si l'on change la première lettre saisie après avoir changé d'année.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9 <tr> <td style="padding:5px" width="34%">Année dernière <input name="annee" type="radio" value=0 onclick="document.getElementById('test').value=0" /></td> <td style="padding:5px" width="33%">Cette Année <input name="annee" type="radio" value=1 checked="checked" onclick="document.getElementById('test').value=1" /></td> <td style="padding:5px" width="33%">Année prochaine <input name="annee" type="radio" value=2 onclick="document.getElementById('test').value=2" /></td> </tr>
si on retappe "a" après avoir changé d'année, on obtiendra de nouveau la liste de l'année précédement choisie (contenu du cache ??)
Je n'ai pas mis tout le code, je n'ai pas modifié le getXMLHTTP() ni les fonctions de mise en forme.
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
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 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 var _testAn=null; function initAutoComplete(form,field,submit,testAn){ // AJOUT POUR ANNEE _testAn=testAn; // AJOUT POUR ANNEE _documentForm=form; _inputField=field; _submitButton=submit; _inputField.autocomplete="off"; creeAutocompletionDiv(); _currentInputFieldValue=_inputField.value; _oldInputFieldValue=_currentInputFieldValue; cacheResults("",new Array()) document.onkeydown=onKeyDownHandler; _inputField.onkeyup=onKeyUpHandler; _inputField.onblur=onBlurHandler; window.onresize=onResizeHandler; // 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 var _oldTest=""; // tourne en permanence pour suggerer suite à un changement du champ texte function mainLoop(){ if(_oldInputFieldValue!=_currentInputFieldValue||test!=_oldTest){ var test= _testAn.value; // AJOUT POUR ANNEE var valeur=escapeURI(_currentInputFieldValue); var suggestions=_resultCache[_currentInputFieldValue]; if(suggestions){ // la réponse était encore dans le cache metsEnPlace(valeur,suggestions) }else{ callSuggestions(valeur,test) // appel distant } _inputField.focus() } _oldInputFieldValue=_currentInputFieldValue; _oldTest=test; 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 = "autocomplete/options.php" //l'adresse à interroger pour trouver les suggestions function callSuggestions(valeur,test){ // AJOUT POUR ANNEE if(_xmlHttp&&_xmlHttp.readyState!=0){ _xmlHttp.abort() } _xmlHttp=getXMLHTTP(); if(_xmlHttp){ //appel à l'url distante _xmlHttp.open("GET",_adresseRecherche+"?debut="+valeur+"&annee="+test,true); // AJOUT POUR ANNEE _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; }
pouvez-vous me donner des pistes pour arriver à mes fins ?
Peut-être vider le cache dès que l'on change d'année (comment faire ?)
Merci d'avance pour vos conseils à venir
Partager