[AJAX] modifications peu convainquante du tuto d'auto-completion
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
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
|
<?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>");
?> |
Bon jusque là tout fonctionnait plutot bien
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 :
Code:
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> |
ou document.getElementById('test') est un champs masqué mis à jour par l'évenement onclick sur des boutons radio
Code:
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> |
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.
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 ??)
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
|
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;
} |
Je n'ai pas mis tout le code, je n'ai pas modifié le getXMLHTTP() ni les fonctions de mise en forme.
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 :D
