Menu deroulant html et selection

j'effectue des requete mysql a travers une interface html. Jusque là pad de pb. Par contre je cherche un moyen pour qu'un menu deroulant puis être également utilisé comme champ de saisie. Je m'explique:

Je possede un menu déroulant possédant un grand nombre de donnée. Pour facilité la vie a mes utilisateur je voudrai quand saisissant les premières lettres de la donnée à rechercher celle ci s'affiche.

Merci d'avance pour vos tuyaux

2 réponses

  1. Salut,
    voici un script qui détecte qu'une touche du clavier a été préssé :

    <head>
    <script language="JavaScript1.2"><!--
    function netscapeKeyPress(e) {
    alert('La touche utilisé a pour code : ' + e.which);

    }

    function microsoftKeyPress() {
    alert('La touche utilisé a pour code : ' + window.event.keyCode);
    }

    if (navigator.appName == 'Netscape') {
    window.captureEvents(Event.KEYPRESS);
    window.onKeyPress = netscapeKeyPress;
    }
    //--></script>
    </head>

    <body onKeyPress="microsoftKeyPress()">

    </body>
    1. Salut,
      J'avais le même problème, je t'explique comment je l'ai solutionné:
      D'abord, j'ai mis dans un tableau toutes les infos qui m'interesse dans un tableau au chargement de la page:
      Dans le head de la page :
      <script type="text/javascript">
      tabLibelle = new Array() ;
      // Création d'un tableau javascript contenant en index 0 le libelle, 1 l'unite1, 2 u2, 3 le code act et 4 le numéro de compte
      <%
      Dim cpteur, contenu
      cpteur = 0
      Do while not objRS.EOF
      contenu = """" &objRS("Libelle_com")& """, """ &objRS("Unite1_com")& """, """ &objRS("Unite2_com")& """, """ &objRS("CodeActivite_act")& """, """ &objRS("NumeroCompte_com")& """"
      %>
      tabLibelle[<%= cpteur %>] = [<%= contenu %>] ;
      <%
      cpteur = cpteur + 1
      objRS.MoveNext
      loop
      %>

      C'est un tableau javascript fait avec une boucle ASP, on doit pouvoir faire pareil avec du PHP.

      Ensuite je met un input type text à l'endroit de la liste déroulante et sur le onblur, j'ai mis une fonction qui, s'il y a la touche étoile, envoie une fonction qui recherche dans le tableau toutes les valeurs commençant par ce que l'utilisateur a tapé avant la touche étoile et je remplace le input text par un select à l'aide du DOM. ça ressemble à ça :

      function compter(event) {
      var eSrc=(document.all)?event.srcElement:event.target; // pointe sur l'input qui appelle la fonction, celui qui devra être transformé si besoin
      //récupération de la valeur
      var valeur = eSrc.value;

      // on regarde si il y a *, ce qui signifie qu'il faut une aide à la saisie du numéro de comtpe
      var reg = new RegExp ("[*]", "g");
      var test1 = valeur.search(reg)
      // si la recherce donne quelque chose, j'envoie la fonction transform(note que moi j'ai fait avec deux fonctions parce que j'en avais besoin mais tu peux mettre dans la même fonction
      if (test1 != -1) {
      var resultat = valeur.split(reg); // le split me met dans un tableau ce qu'il y a avant l'*
      transform(eSrc, resultat[0]);
      }

      et maintenant la fonction transform :

      function transform(elt, valeur){
      var i;
      var td = elt.parentNode;// pointe sur la cellule contenant le input à transformer

      // On transforme tabLibelle (mon tableau du début) en grande chaine de caractère
      var chaine = tabLibelle.join(",");

      // on fabrique l'expression à rechercher composée des chiffres précédent l'étoile et de n'importe quelles autres caractères.
      //La seule obligation est qu'il y en ait (8-nbr de caractère déjà entrés)
      var x = valeur.length;
      x = 8 - x
      var expression = valeur+"{1}\\d{"+x+"}"

      var reg = new RegExp(expression, "gi");

      // On met tous les comptes correspondant à la recherche dans le tableau resultat
      var resultat = chaine.match(reg);

      if(resultat){

      // Création du select ayant les même propriétés que l'input text qu'il va remplacer
      var list=document.createElement('select');
      list.name = elt.name;
      list.id = elt.id;
      list.tabIndex = elt.getAttribute('tabIndex');
      // on y attache les mêmes fonctions qu'avait mon input
      if(document.all){
      list.attachEvent("onblur", libelle);
      list.attachEvent("onblur", compter); // methode pour IE
      list.attachEvent("onblur", ventillation);
      }
      else {
      list.addEventListener("blur", libelle, true);
      list.addEventListener("blur", compter, true); // methode pour Mozilla et consor
      list.addEventListener("blur", ventillation, true);
      }

      td.replaceChild(list,elt); // on remplace elt (=input) par list (=select)

      // on fait une boucle ajoutant les options, à partir du tableau resultat
      i = 0;
      while(i < resultat.length){
      nouveau = new Option(resultat[i], resultat[i]);// dans mon cas, ce qui est affiché a la même valeur que la valeur qui doit être envoyé lors du submit, mais on peut faire différemment si besoin
      list.options[list.length] = nouveau;
      i ++;
      }
      td.childNodes[0].focus(); // on redonne le focus au select
      }
      else{
      alert('Aucun compte ne correspond à votre demande');
      elt.value = "";
      elt.focus();
      }

      }
      Et voilà! j'espère que ça pourra t'aider! Note que si tu avais trouvé un moyen plus simple, je suis preneur du tuyo!
      A plus