Mise à jour d'une liste déroulante à partir d'un textbox

Version imprimable

22/10/2007, 15h47
toonado

Mise à jour d'une liste déroulante à partir d'un textbox

Bonjour,
Voila mon problème... :bug:
J'aimerais mettre à jour une liste déroulante à partir d'une entrée dans un textbox. Pour faire simple, si je saisis la première lettre d'un mot ma liste déroulante se modifie automatiquement et fais apparaitre tout les mots commençant par la donnée saisie dans la textbox...

Dans le cas ou cela est déja résolu, merci de bien vouloir m'indiquer le topic ou cela est dit car je pense que je n'ai pas trouvé de topic expliquant cela ou que j'ai pas bien fait ma recherche...??? :king:

En remerçiant l'ame charitable qui viendra à mon secours :mouarf:
22/10/2007, 15h58
danyboy85

Pour résumer simplement,

- sur l'événement onkeypress ou onkeyup (à toi de voir) de ta zone de texte, tu appelles une fonction javascript qui va aller chercher les données côté serveur (par ajax) en passant en paramètre la valeur de ta zone te texte.

- Ensuite côté serveur tu récupère les bonnes données en fonction du paramètre. Tu formates ces données en XML et tu les renvoie au client.

- côté client, tu traites la réponse xml et à partir de là tu mets à jour ta liste déroulante.

Je sais c'est très concis si tu ne maitrise pas Ajax, XML et Javascipt mais je ne vais pas faire un roman donc renseigne toi toi-même sur ces technologies si tu en as besoin. Je t'ai au moins donné les grandes lignes

PS : j'ai supposé que tu devais aller chercher les données côté serveur mais si tu as déjà tout côté client alors c'est encore plus simple.

PS2 : le topic dont tu parles c'est peutêtre cela : http://www.developpez.net/forums/showthread.php?t=598
22/10/2007, 16h07
toonado

tout est de côté client...
je commence le javascript donc je sais que c'est un peu abuser mais si tu pouvais me montrer la voix ce serais cool...:mouarf:
22/10/2007, 16h11
danyboy85

Bon allez, pas trop le temps mais je fais faire un effort.

Déjà, il me faut plus d'infos que ca :

- Ou sont tes données ? Dans un Array javascript ou autre ?
- Comment sont-elle formatées ?

N'hésite pas à me fournir tu code mais pas tout, sinon c'est illisible... juste l'essentiel.

Salut !

J'ai eu 5 minutes de battement donc je t'ai fais un p'tit code qui marche (IE7 & Firefox). A toi de l'adapter à tes contraintes...

Code:

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
 
<html>
    <head>
        <script language="javascript">
            //--- (C) Copyright danyboy85       (ca c'est pour la déconne)
 
            var tab;
            //--- J'appelle cette fonction au lancement de la page pour initialiser le tableau "tab"
            function init() {
                tab = new Array("Francois", "Fabrice", "Fatima", "Bernard", "Bernadette", "Benabar", "Dany", "David");
            }
 
            //--- Fonction appelée lors de l'événement onkeyup() de la zone de texte
            function go(valeur) {
                var sel = document.getElementById("sel");
                //--- Vidage de la liste déroulante
                while (sel.childNodes.length>0) {
                    sel.removeChild(sel.childNodes[0]);
                }
                //--- On parcours le tableau et on regarde si la chaine "valeur" commence par la valeur d'un item du tableau
                for (var i=0; i<tab.length; i++) {
                    if (startsWith(tab[i], valeur)) {
                        //--- Si oui un génère un nouvel <option> et on l'ajoute à la liste déroulante
                        var o = new Option(tab[i], tab[i]);
                        o.innerText = tab[i];
                        sel.appendChild(o);
                    }
                }
            }
 
            //--- Retourne vrai si la chaine s1 commence par la chaine s2
            function startsWith(s1, s2) {
                if (!s2) {return false;}
                s2 += '';
                var intLength = s2.length;
                return (s1.substr(0, intLength).toLowerCase() == s2.toLowerCase());
            }
        </script>
    </head>
    <body onload="init()">
        <input type="text" id="txt" onkeyup="go(this.value)">
        <select id="sel">
        </select>
    </body>
</html>