[JavaScript] probleme de ComboBox

Fermé
sorakaan Messages postés 59 Date d'inscription mardi 28 juillet 2009 Statut Membre Dernière intervention 18 décembre 2009 - 31 juil. 2009 à 13:31
sorakaan Messages postés 59 Date d'inscription mardi 28 juillet 2009 Statut Membre Dernière intervention 18 décembre 2009 - 31 juil. 2009 à 16:06
Bonjour,


J'ai un souci avec une combobox. J'utilise une fonction bizarre pour la configuer (c'est pas moi qui l'ai codé). Elle est sensée faire des trucs mais elle les fait un peu en random. On m'a dit que rien n'était du au hasard en informatique...

... voici donc le code qui pose probleme:

<script type="text/javascript" src="../ressources/js/check_form.js"></script>
<script type="text/javascript">
	function ComboBoxCore(e, l)
	{
        var editField = e;
        var list = l;
        var closeList;
        var completionActive = false;
        var previousLength = 0;
        var lastLength = 0;
        var textList;
		
        var closeComboBoxList = function()
		{
          list.style.visibility = "visible";
          list.style.display = "none";
          list.disabled = true;
        }
		
        this.openComboBoxList = function()
		{
          if (closeList) window.clearTimeout(closeList);
          list.style.visibility = "visible";
          list.style.display = "block";
          list.disabled = false;
          return false;
        }
      
        this.initCloseComboBoxList = function()
		{
          closeList = window.setTimeout(closeComboBoxList, 0);
          return false;
        }
      
        this.onfocusComboBoxList = function()
		{
          if (closeList) window.clearTimeout(closeList);
          return false;
        }
        
        this.updateList2EditField = function()
		{
          if(list.selectedIndex>=0)
            editField.value = list[list.selectedIndex].text;
          editField.focus();
          editField.select();
          return false;
        }
        
        var completionComboBox = function(prefix, completion)
		{
          editField.value = prefix;
          if(typeof document.selection != 'undefined')
			{
				var range = document.selection.createRange();
				range.text = completion;
				range.moveStart('character', -completion.length);
				range.select();
			}
			else if(typeof editField.selectionStart != 'undefined')
			{
			var i = editField.value.length;
            editField.value += completion;
            editField.selectionStart = i;
			}
        }
        
        var convert = function(w)
		{
           var word = w.toUpperCase();
           word=word.replace(/[\u00C0\u00C1\u00C2\u00C3\u00C4\u00C5\u00C6]/gi,'A');
           word=word.replace(/[\u00C7]/gi,'C');
           word=word.replace(/[\u00C8\u00C9\u00CA\u00CB]/gi,'E');
           word=word.replace(/[\u00CC\u00CD\u00CE\u00CF]/gi,'I');
           word=word.replace(/[\u00D1]/gi,'N');
           word=word.replace(/[\u00D2\u00D3\u00D4\u00D5\u00D6]/gi,'O');
           word=word.replace(/[\u00D9\u00DA\u00DB\u00DC]/gi,'U');
           return word;
        }
        
        this.searchEditFieldIn2List = function()
		{
          var i = 0;
          var value = editField.value;
          var listValue;
          var prefix;
          
          if (lastLength == value.length)
		  {
            completionActive = false;
            previousLength = 0;
            return false;
          }
          
          if ((completionActive == true)&&(value.length == previousLength))
            editField.value = value.substr(0, value.length-1);
          
          if (editField.value == 0)
		  { 
            completionActive = false;
            previousLength = 0;
            lastLength = 0;
            list.selectedIndex = -1;
            return false;
          }
          
          value = convert(editField.value);
          while (value > textList[i])++i;
          list[i].selected = true;
          
          listValue = list[i].text;
          prefix = listValue.substr(0, value.length);
          if (convert(prefix) == value)
		  {
            completionActive = true;
            previousLength = value.length;
            completionComboBox(prefix, listValue.slice(value.length));
          }
		  else
		  {
            completionActive = false;
            previousLength = 0;
          }
          lastLength = editField.value.length;
          editField.focus();
          return false;
        }
        
        this.init = function()
		{
          textList = new Array(list.options.length);
          
          for (var i=0; i < list.options.length; ++i)
		  {
            textList[i] = convert(list[i].text);
          }
        }
      }
      
      function ComboBox(e, l)
	  {
        this.editField = e;
        this.list = l;
        var combo = new ComboBoxCore(this.editField, this.list);
        
        combo.init();
        
        this.list.comboBox = combo;
        this.editField.comboBox = combo;
        
		<!-- pour les select -->
		this.list.onclick = function(){return this.comboBox.updateList2EditField();};
		this.list.onkeyup = function(){return this.comboBox.updateList2EditField();};
		this.list.onblur = function(){return this.comboBox.initCloseComboBoxList();};
		this.list.onfocus = function(){return this.comboBox.onfocusComboBoxList();};
		
        <!-- pour les input -->
        this.editField.onfocus = function(){return this.comboBox.openComboBoxList();};
        this.editField.onblur = function(){return this.comboBox.initCloseComboBoxList();};
        this.editField.onkeyup = function(){return this.comboBox.searchEditFieldIn2List();};
      }
</script>


ouai... c'est long... très long...
mais je dois essayer de trouver d'où vient le probleme.
Comme il est difficile voire impossible de résoudre ces problème d'un coup, je vais essayer de les résoudre au cas part cas, avec votre aide, si possible.

-1- affichage/disparition du select:

- la combobox lie 2 couples input/select (la selection d'un select est envoyée à son input, situé au dessus).

un petit screen:
http://img90.imageshack.us/img90/1329/screen1zkm.jpg

le principal problème réside dans une fonctionnalité qui permet de faire disparaitre les listes (select) lorsqu'elles perdent le focus. en effet, le screen montre la page lors de son chargement. les listes sont affichées avec leur input au dessus. si je selectionne un pays, son nom est envoyé a l'input (pays) au dessus et ses regions s'affichent dans la liste du bas. je selectionne alors une region et son nom est affiché dans l'input (region) au dessus. et... pour le moment, avant de cliquer sur 'valider', je suis obligé de cliquer "dans le décor " pour que la dernière valeur selectionnée soit bien prise en compte lors de l'envoi des données du formulaire.

quelqu'un peut il m'aider à trouver d'où vient ce problème ?
car c'est assez genant... Si on selectionne un pays, une region et qu'on clique sur valider, c'est la seulement que la liste region disparait (on voit plus que l'input) alors que la liste des pays ne disparait pas (bug ?), et lorsque la liste des regions est ouverte, le bouton valider est plus bas car la liste prend de la place (voir screen) et dès qu'on clique sur valider, il remonte d'un coup avec la disparition de la liste (déja ça c'est relou car personne n'aime courir après les boutons de formulaire) et le clic ne marche pas. il faut recliquer une fois qu'il est en place pour que ça les envoit.

bref, c'est un bordel un peu lourd a corriger...

si vous avez pigé d'ou vient le problème je suis à l'ecoute.
si vous avez besoin de plus d'infos j'attends vos questions
si vous avez rien capté... merci quand même d'être passé ^^'

et merci d'avance...
A voir également:

1 réponse

sorakaan Messages postés 59 Date d'inscription mardi 28 juillet 2009 Statut Membre Dernière intervention 18 décembre 2009 2
31 juil. 2009 à 16:06
pas de réponse ?

j'y ai peut être été un peu fort...

laissez tomber ^^'
0