DropDownList éditable

Bonjour,

est que quelqu'un a un exemple, de code, une adresse de dropdownlist editable ?

Une Dropdownlist, dans laquelle on peut écrire le début d'un mot est la liste ce met à jour...

Vous voyez ?

Merci

Cab

Un truc comme ce qu'il y a pour la textbox de recherche en haut du site ? :p

c'est loin d'etre facile, il faut utiliser la technologie Ajax (http://www.aspfr.com/ajax.aspx) puis aprés faut bien comprendre comment tout ca fonctionne ... renseigne toi sur ajax et aussi un peu sur javascript aprés tu verras mieux le fonctionnement du truc:)

---

Cyril - MCP ASP.net
Webmaster de : Hoshimi.CodeS-SourceS.fr

Ca a l'air d'être un truc de grand malade ton ajax...

Par contre, j'ai trouvé du code javascript, je le posterai quand ça marchera !

Cab

Voila,

le résultat est sympa

Dans le Head de la page aspx:

        <script>
            function display_liste(calqt, calql) {  // Affiche le calque de la liste
                calql.style.visibility = 'visible';
                calql.style.top = calqt.style.top;
                calql.style.left = calqt.style.left;
            }
           
            function hide_liste(calqt, calql) {  // Affiche ou masque le calque de la liste suivant son dernier état
                if (calql.style.visibility == 'visible') {
                    calql.style.visibility = 'hidden';
                }
                else {
                    display_liste(calqt, calql);
                }
            }
           
            function display_down(keyc, listd, calqt, calql) {  // Affiche la liste si la touche "keyc" est pressée
                if (event.keyCode==keyc) {
                    display_liste(calqt, calql);
                }
                if ((event.keyCode==40) && (event.keyCode==keyc)) {
                    listd.focus();
                }
            }
           
            function enter_list(textb, listd, calql) {  // appelle getValue si la touche "Enter" est pressée dans la liste
                if (event.keyCode==13) {
                    getValue(textb, listd, calql);
                    parent.frames['droite'].location='./droite.php?NOM_POSTE='+listed.options[listed.selectedIndex].value;
                    parent.frames['gauche_stat'].location='./gauche_bas.php?NOM_POSTE='+listed.options[listed.selectedIndex].value;
                }
            }
               
            function liste_lostfocus(textb, listd, calql) { // Masque le calque si le texte et la liste n'ont pas le focus
                if ( (self.document.activeElement.name != textb) && (self.document.activeElement.name != listd) ) {
                    calql.style.visibility = 'hidden';
                }
            }
           
            function getValue(textb,listd, calql) {    // Affecte la valeur de la liste choisie dans la zone de texte
                textb.value=listd.item(listd.selectedIndex).text;
                // textb.value=listd.item(listd.selectedIndex).value; si on veut la valeur dans le code et pas dans la liste
                calql.style.visibility = 'hidden';
                textb.focus();
                textb.select();
            }
           
            function list_size(liste) {
                t=0;
                for(i=0; i<liste.length; i++) {
                    if(liste.options[i].value.length > t) {
                    t=liste.options[i].value.length;
                    }
                }
                list_size=t;
            }
           
            function text_exist(textb, listd) { // regarde si le début existe
                if (textb.value != "") {
                    for (i=0; i<listd.length; i++) {
                    if (textb.value.toLowerCase() == listd[i].text.substring(0, textb.value.length).toLowerCase()) {
                        return i;
                    }
                    else {
                        if (listd[i].text > textb.value.substring(0, listd[i].text.length)) {
                        return -2;
                        }
                    }
                    }
                }
                return -1;
            }
           
            function disp_exist(textb, listd, calqt, calql) { // regarde si existe et affiche le calque de la liste
                temp=text_exist(textb, listd);
                if (temp != -1) {
                    display_liste(calqt, calql);
                }
                else {
                    calql.style.visibility = 'hidden';
                }
                return temp;
            }
           
            function text_match(textb, listd) { // regarde si le texte existe en entier
                if (textb.value != "") {
                    for (i=0; i<listd.length; i++) {
                    if (textb.value.toLowerCase() == listd[i].text.toLowerCase()) {
                        return i;
                    }
                    }
                }
                return -1;
            }
        </script>

Ensuite dans le body de la même page:

<div id="texte1" nowrap STYLE="BORDER-RIGHT:white 2px inset; BORDER-TOP:white 2px inset; DISPLAY:inline; VISIBILITY:visible; BORDER-LEFT:white 2px inset; WIDTH:0px; BORDER-BOTTOM:white 2px inset">
                           
    <asp:TextBox Runat="server" name="texteb" id="texteb" style="BORDER-TOP-WIDTH:0px;BORDER-LEFT-WIDTH:0px;FONT-SIZE:14px;BORDER-BOTTOM-WIDTH:0px;BORDER-RIGHT-WIDTH:0px" Width="82" onDblClick="hide_liste(document.getElementById('texte1'), document.getElementById('liste1')); document.getElementById('texteb').select();" onblur="liste_lostfocus('texteb', 'listed', document.getElementById('liste1'));" onkeydown=" display_down(34, document.getElementById('listed'), document.getElementById('texte1'), document.getElementById('liste1'));" onkeyup="document.getElementById('listed').selectedIndex=disp_exist(document.getElementById('texteb'), document.getElementById('listed'), document.getElementById('texte1'), document.getElementById('liste1'));   display_down(40, document.getElementById('listed'), document.getElementById('texte1'), document.getElementById('liste1')); enter_list(document.getElementById('texteb'), document.getElementById('listed'), document.getElementById('liste1'));">
    </asp:TextBox>
   
    <input type="button" id="bouton" value="6" style="FONT-SIZE:10px;LINE-HEIGHT:0;FONT-FAMILY:webdings;HEIGHT:18px" onClick=" hide_liste(document.getElementById('texte1'), document.getElementById('liste1'));" onblur="liste_lostfocus('texteb', 'listed', document.getElementById('liste1'));">
</div>
<div id="liste1" STYLE="VISIBILITY:hidden;postion:absolute">
    <asp:DropDownList Runat="server" Autopostback="True" OnSelectedIndexChanged="ddl_SelectedIndexChanged" id="listed" name="listed" size="5" onClick="JScript:getValue(document.getElementById('texteb'),document.getElementById('listed'),document.getElementById('liste1'));__doPostBack(null,null);" onkeydown="JScript:enter_list(document.getElementById('texteb'),document.getElementById('listed'),document.getElementById('liste1'));">    </asp:DropDownList>
</div>

Ca fait un peu peur, vu comme ça, mais les styles prennent pas mal de place tout comme les évenements...

Dans le code behind, vous pouvez gérer l'événement OnSelectedIndexChanged de la ddl:

        public void ddl_SelectedIndexChanged(object sender, System.EventArgs e)
        {
           
        }

Je crois que je n'ai rien oublié...


Cab

j'ai pas tout lu le code, mais t'aurais pas un exemple en ligne ? t'as pas d'Ajax la ? :(

par contre j'ai vu a un endroit un __doPostBack(null,null);" utilise plutot __doPostBack(this.id, null)

et quand tu te sert de ca dans la page il faut etre sur qeu la fonction est ecrite dans la page, donc un me.page.registerpostback ou un truc du genre :p

en tout cas ca a l'air sympa :)

---

Cyril - MCP ASP.net
Webmaster de : Hoshimi.CodeS-SourceS.fr

Le code dont je me suis inspiré est là:

http://javascriptfr.com/code.aspx?ID=20093

et non ça n'utilise pas d'Ajax, désolé...

Il reste des bugs, mais bon, le principal y est...