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 : 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>");
?>
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 : 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>
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
6
7
8
9
 
    <tr>
      <td  style="padding:5px" width="34%">Ann&eacute;e derni&egrave;re&nbsp;&nbsp;
	  <input name="annee" type="radio" value=0 onclick="document.getElementById('test').value=0" /></td>
      <td  style="padding:5px" width="33%">Cette Ann&eacute;e&nbsp;&nbsp;
	  <input name="annee" type="radio" value=1 checked="checked" onclick="document.getElementById('test').value=1" /></td>
	  <td  style="padding:5px" width="33%">Ann&eacute;e prochaine&nbsp;&nbsp;
	  <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 : 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;
}
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