problème saisie semi-automatique (autocomplete) avec javascript

problème saisie semi-automatique (autocomplete) avec javascript - HTML/CSS - Programmation

Marsh Posté le 07-02-2006 à 11:54:08    

Bonjour à tous,
J'ai un assez gros problème avec un autocomplete (ou saisie semi-automatique).
En effet, j'ai un petit script qui me permet d'afficher un select qui change avec la saisie de l'utilisateur.
Ce script fonctionne parfaitement (bon il est un peu lent, mais il y a 5000 options, c'est logique :P)
Mon problème vient de la saisie semi-automatique d'Internet Explorer (version 6, pour le détail...). En effet, je dios l'annuler pour éviter qu'elle ne s'affiche par dessus ma propre saise automatique. Ce n'est, là encore, pas un problème : j'ai rajouté l'attribut "autocomplete=off" à mon input.  
MAIS... Je dois activer la saisie semi automatique (celle d'IE) pour d'autre champs du formulaire! Naïf que je suis, je me dis qu'avec un autocomplete="on" ca ira... ben non! Enfin si... a moitié... J'ai déjà quelques valeurs d'enregistrées pour ces input, et il affiche bien la zone de saisie semi-auto, mais Internet Explorer ne m'enregistre pas d'autres valeures?!
 
PS: si je ne suis pas clair, n'hésitez pas à me le dire... J'ai vraiment besoin de trouver une solution à ce problème (et ca me fait   :pfff:  :cry: ... hem... pardon)


Message édité par haltabush le 07-02-2006 à 14:13:03
Reply

Marsh Posté le 07-02-2006 à 11:54:08   

Reply

Marsh Posté le 07-02-2006 à 15:06:07    

Code :o

Reply

Marsh Posté le 07-02-2006 à 15:22:30    

En gros :  
Classe JS

Code :
  1. /*
  2. Remarque :
  3. - la liste javascript est un tableau qui existe tout le temps
  4. - la liste HTML est crée, affichée, supprimée à partir de la liste javascript
  5. - besoin de deux identifant en paramètres pour le retour des valeurs :  
  6.  - un identifiant pour retourner la valeur (id_valeur)
  7.  - un identifiant qui contient le texte entré et pour retourner le texte (id_texte)
  8. */
  10. //Création d'un objet javascript de type liste déroulante
  11. function CreerListe(id_liste, nom_liste, hauteur_liste, largeur_liste, id_valeur, id_texte, formulaire) {
  12. this.id        = id_liste;
  13. this.nom       = nom_liste;
  14. this.hauteur   = hauteur_liste;
  15. this.largeur   = largeur_liste
  16. this.id_valeur = id_valeur;
  17. this.id_texte  = id_texte;
  18. this.search    = "";
  19. this.nb        = 0;
  20. this.Add       = AjouterItem;
  21. this.Ecrire    = EcrireListe;
  22. this.Actualise = ActualiseListe;
  23. this.Check     = CheckListe;
  24. this.Lien      = LienListe;
  25. this.Affiche   = AfficheListe;
  26. this.Masque    = MasqueListe;
  27. // this.nom_form  = formulaire;
  28. //tableau des noeuds de la liste
  29. this.nodes     = new Array();
  30. this.obj       = id_liste + "Object";
  31. eval(this.obj + "=this" );
  32. return this;
  33. }
  35. //Création d'un noeud qui va contenir la valeur et le texte
  36. function CreerNoeud(valeur, texte){
  37. this.valeur = valeur;
  38. this.texte  = texte;
  39. }
  41. //Correspond à la fonction Add, ajout d'un élément à la liste javascript
  42. function AjouterItem(valeur, texte){
  43. //ajout à la fin du tableau d'un noeud contenant une valeur et un texte
  44. this.nodes.push(new CreerNoeud(valeur, texte));
  45. this.nb++;
  46. }
  48. //Méthode qui écrit/crée la liste HTML, une liste vide pour l'instant
  49. function EcrireListe() {
  50. var champ_texte = document.getElementById(this.id_texte);
  51. //les positions du champs texte sont récupéré
  52. var posX = (parseInt(champ_texte.style.top)+parseInt(champ_texte.style.height))+'px';
  53. var posY = champ_texte.style.left;
  54. var txt = '<div style="position:absolute;top:'+posX+';left:'+posY+';z-index:100;">';
  55. txt +='<select id="';
  56. if (document.layers) {
  57.  txt += this.id+"\" name=\""+this.nom+"\" size=\""+this.hauteur+"\" onclick=\""+this.obj+".Lien();\">";
  58. } else {
  59.  txt += this.id+'" name="'+this.nom+'" size="'+this.hauteur+'" style="width:'+this.largeur+';display:none" onclick="'+this.obj+'.Lien();">';
  60. }
  61. txt+="</select><div>";
  62. document.write(txt);
  63. }
  65. //Actualise automatiquement la liste HTML
  66. function CheckListe(){
  67. this.Actualise();
  68. //appel automatique de la fonction CheckListe par l'intermédiaire de this.obj.Check()
  69. if (document.layers) {
  70.  setTimeout(this.obj+".Check()", 1001)
  71. } else {
  72.  setTimeout(this.obj+".Check()", 100)
  73. }
  74. }
  76. //Actualise la liste HTML en fonction de contenu du du champ texte
  77. function ActualiseListe() {
  78. //récupération de la liste HTML
  79. listeaux = document.getElementById(this.id);
  80. //récupération de l'élement HTML qui contient le texte entré par l'utilisateur
  81. champaux = document.getElementById(this.id_texte).value;
  82. if (champaux!=this.search) {
  83.  this.search=champaux;
  84.  //la longueur de la liste HTML est remise à zéro
  85.  listeaux.options.length = 0;
  86.  //parcours de la liste javascript et création de la liste HTML
  87.  for (var i=0; i<this.nb; i++) {
  88.   //si le texte de la liste javascript commence par la chaine champaux, on crée un élément pour la liste HTML
  89.   if ( this.nodes[i].texte.substring(0,champaux.length).toUpperCase()==champaux.toUpperCase() ) {
  90.    var o = new Option(this.nodes[i].texte, this.nodes[i].valeur);
  91.    listeaux.options[listeaux.options.length] = o;
  92.   }
  93.  }
  94.  //affectation des attributs à la liste (marche pas sous IE6)
  95.  liste_option = document.getElementById(this.id).getElementsByTagName('option');
  96.  for (i=0; i<liste_option.length; i++){
  97.   liste_option[i].onmouseover = RollOver;
  98.   liste_option[i].onmouseout  = RollOut;
  99.  }
  100. }
  101. }
  102. //envoie de la sélection de l'utiliateur dans les deux éléments HTML id_valeur et id_texte
  103. function LienListe(){
  104. //récupération de la liste HTML
  105. listeaux = document.getElementById(this.id);
  106. //récupération de l'élément HTML id_valeur
  107. valaux = document.getElementById(this.id_valeur);
  108. //récupération de l'élément HTML id_texte
  109. champaux = document.getElementById(this.id_texte);
  110. //indice sélectionné dans la liste HTML
  111. i = listeaux.selectedIndex;
  112. //affectation des champs value et text
  113. valaux.value   = listeaux.options[i].value;
  114.  champaux.value = listeaux.options[i].text;
  115. //Modif pour l'ajotu de contrat :  
  116. if (champaux.name=="nom_client" && valaux.name=="client" && this.nom=="liste_client" ){
  117. RemplirContacts();
  118. }
  119. else{
  120. if (champaux.name=="nom_mannequin" && valaux.name=="mannequin" && this.nom=="liste_mann" ){
  121.  fctTestEnfant1();
  122.  this.Masque();
  123. }
  124. else{
  125.  //on masque la liste HTML après la sélection
  126.  this.Masque();
  127. }
  128. }
  129. }
  130. //Affichage de la liste HTML
  131. function AfficheListe(){
  132. //récupération de la liste HTML
  133. listeaux = document.getElementById(this.id);
  134. //on affiche la liste si elle contient au moins 1 valeur
  135. if(listeaux.options.length > 0){
  136.  listeaux.style.zIndex=5;
  137.  listeaux.style.display = "block";
  138. }else{
  139.  this.Masque();
  140. }
  141. }
  142. //Masquage de la liste HTML
  143. function MasqueListe(){
  144. //récupération de la liste déroulante
  145. listeaux = document.getElementById(this.id);
  146. //si la liste n'est pas déja masquée, on la masque
  147. if(listeaux.style.display == "block" ){
  148.  listeaux.style.display = "none";
  149. }
  150. }
  151. // coloration au passage de la souris
  152. function RollOver() {
  153. this.style.backgroundColor = '#000000';
  154. this.style.color = '#FFFFFF';
  155. }
  156. // retour à l'état normal
  157. function RollOut() {
  158. this.style.backgroundColor = '#FFFFFF';
  159. this.style.color = '#000000';
  160. }


 
 
Création de la liste de la saisie auto "maison"

Code :
  1. var Liste = new CreerListe('liste_client','liste_client',10,200,'client','nom_client');
  2. <?php
  3. mysql_select_db($database_connexion_totem, $connexion_totem);
  4. $requete = "SELECT id_client, raison_sociale FROM client WHERE visible=1 ORDER BY 2";
  5. $resultat = mysql_query($requete, $connexion_totem) or die(mysql_error());
  6. while ($ligne = mysql_fetch_assoc($resultat)){
  7. $id = $ligne['id_client'];
  8. $rs = $ligne['raison_sociale'];
  9. print("Liste.Add(\"$id\",\"$rs\" );\n" );
  10. }
  11. mysql_free_result($resultat);
  12. ?>


 
Et enfin, le code HTML:

Code :
  1. <form id="blabal" action="<? echo $_SERVER['PHP_SELF'];?>" method="post"/>
  2. <input type="hidden" name="client" id="client" value=""/>
  3. <input id="nom_client" name="nom_client" autocomplete="off" type="text" onKeyUp="Liste.Affiche();" value="" style="position:absolute;top:35px;left:220px;width:350px;height:22px;z-index:3;"/>
  4. <script type="text/javascript">
  5.  Liste.Ecrire();
  6.  Liste.Check();
  7. </script>
  8. <input type="text" autocomplete="on" id="blabla2" name="blabla2"/>
  9. </form>


 
 
Je rappelle que le JS fonctionne, ou du moins semble fonctionner, parfaitement. Le problème c'est que j'aimerais pouvoir remplir le champ "blabla2" avec la saisie semi-auto d'Internet Explorer, et ca mache pô...
Ca va faire 2 jours que je flanche là dessus... J'ai pas grand chose d'autre à faire, mais quand même...


Message édité par haltabush le 07-02-2006 à 15:25:54
Reply

Marsh Posté le 08-02-2006 à 11:31:39    

Ca n'a pas l'air d'aider beaucoup, mon code... Vous n'avez pas une ptite idée??

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed