TextBox on change -> update automatique -> Trouvé !!!

TextBox on change -> update automatique -> Trouvé !!! - HTML/CSS - Programmation

Marsh Posté le 07-10-2002 à 13:57:19    

Salut,
Je me demandé si il était possible, comme dans access de faire un Sélect où il était possible de saisir du texte à l'intérieur une fois le code exécuté.
Je m'explique :
On a par ex, un sélect avec les valeurs 10, 101, 20, 200, 300, etc...
Dans cette zone déroulante nous pourrions saisir ou faire érouler pour avoir la valeur 10 par ex.
Pour avoir la valeur 10, on pourrait soit dérouler le sélect, soit saisir directement dans la zone de saisie.
Ca existe ?


Message édité par format_c le 07-10-2002 à 19:40:53

---------------
Mes guitares, ampli, et effets sont en vente !
Reply

Marsh Posté le 07-10-2002 à 13:57:19   

Reply

Marsh Posté le 07-10-2002 à 15:26:48    

En fait je vais reformuler ma question :)
Imaginons que nous avons un Input type="text" et qu'à chaque fois qu'on tape une nouvelle lettre il y est un javascript qui vérifie les variavbles a1, a2, a3, .... an pour trouver la variable qui se rapproche le plus de la valeur de mon input.
 
Ex :
a1=Bernard
a2=benoit
a3=sophie
a4=etienne
etc...
Je commence à saisir la lettre "B" et je voudrais que le javascript me renvoie directement Benoit comme choix dans mon input, tout en me donnant la possibilité de continuer à écrire moi même la suite du tete (Bernard, par exemple).
 
 
C'est faisable un truc comme ça ?


---------------
Mes guitares, ampli, et effets sont en vente !
Reply

Marsh Posté le 07-10-2002 à 15:30:31    

Pas a ma connaissance. Pour avoir le même style de fonctionnalité j'avais pris un champ texte accolé au champ select, et un petit bout de code pour les lier.

Reply

Marsh Posté le 07-10-2002 à 15:31:40    

lorill a écrit a écrit :

Pas a ma connaissance. Pour avoir le même style de fonctionnalité j'avais pris un champ texte accolé au champ select, et un petit bout de code pour les lier.




Si t'avais ce petit bout de code, j'en serais comblé  :jap:


---------------
Mes guitares, ampli, et effets sont en vente !
Reply

Marsh Posté le 07-10-2002 à 15:34:23    

copier/coller
 

Code :
  1. /******************************************************************************
  2.     Composant texte et combo box - jsTxtCombo
  3.     Vincent Fiack - 19/08/2002
  4. *******************************************************************************/
  7. //------------------------------------------------------------------------------
  8. //-- Constructeur
  9. //------------------------------------------------------------------------------
  11. /**
  12. * Constructeur
  13. *  
  14. * @param text le champ texte
  15. * @param combo le champ de liste deroulante
  16. * @param une fonction(valeur, libelle) a appeler ou null
  17. */
  18. function jsTxtCombo(text, combo, callback)
  19. {
  20.     //elements internes
  21.     this.text = text;
  22.     this.combo = combo;
  23.     this.callback = callback;
  24. }
  27. //------------------------------------------------------------------------------
  28. //-- Methodes privées
  29. //------------------------------------------------------------------------------
  31. /**
  32. * Retourne le premier index correspondant au texte
  33. *
  34. * @param text la chaine saisie
  35. * @return l'index ou -1 si rien ne correspond
  36. */
  37. jsTxtCombo.prototype.getComboIndex = function(text)
  38. {
  39.     for(i=0;i<this.combo.options.length;i++)
  40.     {
  41.         if(this.combo.options[i].text.substring(0, text.length).toLowerCase() == text.toLowerCase())
  42.             return i;
  43.     }
  45.     return -1;
  46. }
  48. jsTxtCombo.prototype.onKeyUp = function()
  49. {
  50.     index = this.getComboIndex(this.text.value);
  51.     if(index < 0)
  52.         return;
  54.     this.combo.options[index].selected = true;
  55. }
  57. jsTxtCombo.prototype.onChange = function()
  58. {
  59.     index = this.combo.selectedIndex;
  60.     this.text.value = this.combo.options[index].text
  61.     if(this.callback != null)
  62.         this.callback(this.combo.options[index].value, this.combo.options[index].text)
  63. }


 
par contre moi c'était que pour la recherche sur saisie, pas l'ajout de valeurs manuelles. Pour le faire y'a qu'a virer la ligne qui copie le contenu du select dans le text.

Reply

Marsh Posté le 07-10-2002 à 15:35:33    

merci bcp je vais essayer de comprendre tout ça ;)


---------------
Mes guitares, ampli, et effets sont en vente !
Reply

Marsh Posté le 07-10-2002 à 15:36:08    

un exemple d'utilisation :
 

Code :
  1. <HTML>
  2. <HEAD>
  3. <TITLE>Page d'exemple pour les combo box</TITLE>
  4. <script type="text/javascript" src="jstxtcombo.js"></script>
  5. <script type="text/javascript">
  6. //variable qui va contenir l'instance du combo/texte
  7. var txtcombo;
  9. //callback optionnel - appelé apres le choix d'un élement
  10. function callback(valeur, texte)
  11. {
  12.     alert("[" + valeur + "] " + texte);
  13. }
  15. //initialisation du composant
  16. function init()
  17. {
  18.      txtcombo = new jsTxtCombo(document.getElementById('text'),
  19.                     document.getElementById('combo'),
  20.                     callback);
  21. }
  22. </script>
  23. </HEAD>
  25. <BODY onload="init()">
  27. <input id="text" name="text" type="text" onKeyUp="txtcombo.onKeyUp()" onChange="txtcombo.onChange()">
  28. <select id="combo" name="combo" onChange="txtcombo.onChange()">
  29. <option value="val1">unevaleur</option>
  30. <option value="val2">uneautre</option>
  31. <option value="val3">encoreune</option>
  32. </select>
  34. </BODY>
  35. </HTML>

Reply

Marsh Posté le 07-10-2002 à 15:41:27    

lorill a écrit a écrit :

un exemple d'utilisation :
 

Code :
  1. <HTML>
  2. <HEAD>
  3. <TITLE>Page d'exemple pour les combo box</TITLE>
  4. <script type="text/javascript" src="jstxtcombo.js"></script>
  5. <script type="text/javascript">
  6. //variable qui va contenir l'instance du combo/texte
  7. var txtcombo;
  9. //callback optionnel - appelé apres le choix d'un élement
  10. function callback(valeur, texte)
  11. {
  12.     alert("[" + valeur + "] " + texte);
  13. }
  15. //initialisation du composant
  16. function init()
  17. {
  18.      txtcombo = new jsTxtCombo(document.getElementById('text'),
  19.                     document.getElementById('combo'),
  20.                     callback);
  21. }
  22. </script>
  23. </HEAD>
  25. <BODY onload="init()">
  27. <input id="text" name="text" type="text" onKeyUp="txtcombo.onKeyUp()" onChange="txtcombo.onChange()">
  28. <select id="combo" name="combo" onChange="txtcombo.onChange()">
  29. <option value="val1">unevaleur</option>
  30. <option value="val2">uneautre</option>
  31. <option value="val3">encoreune</option>
  32. </select>
  34. </BODY>
  35. </HTML>






 
Tu lis dans mes pensées :D
Merci  :jap:


---------------
Mes guitares, ampli, et effets sont en vente !
Reply

Marsh Posté le 07-10-2002 à 15:42:47    

bah le fichier était dans le même répertoire, un copier/coller de plus ou de moins :D

Reply

Marsh Posté le 07-10-2002 à 15:49:53    

lorill a écrit a écrit :

 
par contre moi c'était que pour la recherche sur saisie, pas l'ajout de valeurs manuelles. Pour le faire y'a qu'a virer la ligne qui copie le contenu du select dans le text.




Moi aussi il ne s'agit que de recherche.
En fait je génère un sélect en php, contenant les valeurs d'un des champs de ma base (au pif, celui des users), et dans ma textbox je souhaitais que ça fasse la même chose que ton script mais aulieu que la valeur soit renvoyée dans le select, elle le soit directement dans le textbox ;)


---------------
Mes guitares, ampli, et effets sont en vente !
Reply

Marsh Posté le 07-10-2002 à 15:49:53   

Reply

Marsh Posté le 07-10-2002 à 15:50:54    

bah, ca s'adapte facilement, non ?

Reply

Marsh Posté le 07-10-2002 à 15:51:41    

lorill a écrit a écrit :

bah, ca s'adapte facilement, non ?




Ben disons que j'ai déjà du mal avec les langages que je connais, alors avec ceux que je connais pas...c'est carnaval :D


---------------
Mes guitares, ampli, et effets sont en vente !
Reply

Marsh Posté le 07-10-2002 à 16:05:57    

Jai un peu changé le code mais ça coince :)
 
pour le .js :

Citation :


/******************************************************************************  
Composant texte et combo box - jsTxtCombo  
Vincent Fiack - 19/08/2002  
*******************************************************************************/  
 
 
//------------------------------------------------------------------------------  
//-- Constructeur  
//------------------------------------------------------------------------------  
 
/**  
* Constructeur  
*  
* @param text le champ texte  
* @param combo le champ de liste deroulante  
* @param une fonction(valeur, libelle) a appeler ou null  
*/  
function jsTxtCombo(text, combo, callback)  
{  
//elements internes  
this.text = text;  
this.combo = combo;  
this.callback = callback;  
}  
 
 
//------------------------------------------------------------------------------  
//-- Methodes privées  
//------------------------------------------------------------------------------  
 
/**  
* Retourne le premier index correspondant au texte  
*  
* @param text la chaine saisie  
* @return l'index ou -1 si rien ne correspond  
*/  
jsTxtCombo.prototype.getComboIndex = function(text)  
{  
for(i=0;i<this.combo.options.length;i++)  
{  
if(this.combo.options[i].text.substring(0, text.length).toLowerCase() == text.toLowerCase())  
return i;  
}  
 
return -1;  
}  
 
jsTxtCombo.prototype.onKeyUp = function()  
{  
index = this.getComboIndex(this.text.value);  
if(index < 0)  
return;  
 
this.combo.options[index].selected = true;  
}  
 
jsTxtCombo.prototype.onChange = function()  
{  
index = this.combo.selectedIndex;  
this.text.value = this.combo.options[index].text  
 
}  

jsTxtCombo.prototype.onKeyPress = function()  
{  
index = this.combo.selectedIndex;  
this.text.value = this.combo.options[index].text  
}
 


 
 
Pour l'exemple :

Citation :


<HTML>  
<HEAD>  
<TITLE>Page d'exemple pour les combo box</TITLE>  
<script type="text/javascript" src="jstxtcombo.js"></script>  
<script type="text/javascript">  
//variable qui va contenir l'instance du combo/texte  
var txtcombo;  
 
//callback optionnel - appelé apres le choix d'un élement  
function callback(valeur, texte)  
{  
   alert("[" + valeur + "] " + texte);  
}  
 
//initialisation du composant  
function init()  
{  
    txtcombo = new jsTxtCombo(document.getElementById('text';),  
                   document.getElementById('combo';),  
                   callback);  
}  
</script>  
</HEAD>  
 
<BODY onload="init()">  
 
<input id="text" name="text" type="text" onKeyUp="txtcombo.onKeyUp()" onKeyPress="txtcombo.onKeyPress()" onChange="txtcombo.onChange()">  
<select id="combo" name="combo" onChange="txtcombo.onChange()">  
<option value="val1">Francois</option>  
<option value="val2">Audrey</option>  
<option value="val3">beatrice</option>  
</select>  
 
</BODY>  
</HTML>


 
Si tu vois un ptit truc qui pourrait arranger la sauce ;)
 
ps : J'ai traffiqué un peu à la louche :D


---------------
Mes guitares, ampli, et effets sont en vente !
Reply

Marsh Posté le 07-10-2002 à 16:24:50    

ahem. t'as le keypress et le keyup qui vont se marcher sur les pieds, la...
 
la seul truc a modifier je dirais que c'est ca :

Code :
  1. jsTxtCombo.prototype.onKeyUp = function() 
  2. { 
  3. index = this.getComboIndex(this.text.value); 
  4. if(index < 0) 
  5. return; 
  7. //this.combo.options[index].selected = true;   
  8. this.text.value = this.combo.options[index].text;
  9. }

Reply

Marsh Posté le 07-10-2002 à 16:29:41    

par contre je suppose que tu voudrais que le texte rajouté soit sélectionné pour qu'il soit viré a la prochaine frappe, tant qu'a faire ? parce que ca je sais même pas si c'est faisable.

Reply

Marsh Posté le 07-10-2002 à 17:19:06    

lorill a écrit a écrit :

par contre je suppose que tu voudrais que le texte rajouté soit sélectionné pour qu'il soit viré a la prochaine frappe, tant qu'a faire ? parce que ca je sais même pas si c'est faisable.




Ouep exactement  :jap:


---------------
Mes guitares, ampli, et effets sont en vente !
Reply

Marsh Posté le 07-10-2002 à 19:41:14    

J'ai trouvé un script qui fait exactement ça !
Le pb c'est qu'il est ... payant !
http://www.ycode.com/ComboBox/Latest/combobox_test.htm

Reply

Marsh Posté le 07-10-2002 à 20:03:26    

Mais j'ai trouvé une version shareware !
http://www.programmersheaven.com/f [...] ombo17.zip

Reply

Marsh Posté le 07-10-2002 à 21:11:15    

Et un ptit nouveau bcp plus simple à utiliser :
http://www.deadbeef.com/dhtml/combobox.htm

Reply

Sujets relatifs:

Leave a Replay

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