[asp.net] Zelf invullen + Dropdownlist

[dominion99]

Ik heb er op gezocht, maar ik vindt alleen maar tutorials of voorbeelden hoe je een dropdownlist moet vullen of bewerken

Maar ik wil eigenlijk een dropdownlist en een textbox, dus als de aangereikte voorbeelden in de dropdownlist niet voldoende zijn dan vul je hem zelf aan

Maar is dit mogelijk in asp.net, ik zie geen opties die misschien zouden kunnen werken

[dominic]

asp.net is serverside dus daar zul je clientside weinig mee kunnen beginnen. Ik heb zelf ook voor deze vraag gestaan en heb de oplossing zelf maar verzonnen: Een textbox met een button ernaast waardoor er een popup (iframe) tevoorschijn komt met daarin nog meer keuzemogelijkheden. Dit alles in hetzelfde uiterlijk als een echte pulldown..

[Verwijderd]

Je bedoelt een dropdown combo?

[dominion99]

Ja een drop down combo, bestaan die echt niet in Asp.net, het hoeft toch ook helemaal niet serversided,

[Canard]

uhm... de code die ASP.NET uitspuugt blijft natuurlijk gewoon HTML en HTML kent geen component dat werkt als een combinatie van een combobox en textbox!
De enige oplossing is zoiets als dominicbout heeft gedaan.

[dominion99]

Nee, ik weet dat het gewoon html blijft. Maar misschien hadden ze wel een slimme constructie gebouwd die het wel mogelijk maakte

[axis]

heb zoiets al verschillende keren gemaakt, maar misschien niet zoals je in gedachten had..

voorbeeld: http://www.snowtrex.nl/content/services/brochure.aspx (onderaan de pagina)

als je verschillende waarden in die combo kiest, verschijnt er rechts soms niets, soms een texbox, en soms weer een andere combo.

[dominion99]

Nou ja, dan moeten we zo maar iets verzinnen toch hardstikke bedankt voor de reacties

[PhoneTech]

Je kan zoiets maken in javascript. Gebruikmakend van innerHTML kan je de inhoud van ander textboxen of select lists (is eigenlijk een drop down, maar groter) in een select list gooien door gewoon een divje te vullen met de select items...

[dominion99]

Hmm, maar kan dit icm asp.net, kun je misschien een klein voorbeeld geven want javascript ken ik niet echt

[Verwijderd]

Het enige dat ik kan bedenken is standaard in de ComboBox een item 'Anders, namelijk...' zetten.

Op die combobox zet je dan een event, waarin je checkt of die optie gekozen is, zodat je in dat geval een nieuwe textbox visible kunt zetten, en focussen.
In die textbox kunnen mensen dan hun eigen item invullen...

(Ik moet ergens een voorbeeldje hebben gleuf ik.... )

[dominion99]

ja, dat had axis al laten zien, maar dat wil ik eigelijk niet

Ik heb nou iets anders bedacht. nl

Ik heb een dropdownlist met 800 zoekcodes, daarvoor staat een textbox, als je wat invult in de textbox (bv 'a') dan wordt het eerste item van de dropdownlist die begint met 'a' geselecteerd, en daarna 'aa' dan gaat hij nog verder filteren.

Dat moet toch mogelijk zijn, liefst met javascript (dat gaat sneller)
Volgens mij moet het mogelijk zijn om met javascript de selectedindex van die dropdownbox de manipuleren, en daarna kun je ook met asp.net volgens mij die selected index opvragen.

ps Subreality jij had het over focussen, hoe kun je de focus op een knop of editbox zetten via asp.net

[Verwijderd]

Door document.iets.focus() te doen in JavaScript

('Javascript ruleert meer dan den gemiddelden mensch denkt dat het ruleert' is mijn motto van de dag)

[dominion99]

ja, ok maar dat kan ik niet aanspreken in een asp.net code

[Verwijderd]

Bij mij gaat alleen een filter op de 1e letter. 2e letter lijkt mij redelijk onmogelijk, of er moet een input naast staan waar je je filter neer kan zetten. met een OnTextChange event (o.i.d.) in .Net een filter erop gooien (auto postback wel aanzetten)

[dominion99]

Ja een filter voor de eerst letter is standaard

[PhoneTech]

Ik heb ooit een script in elkaar gedraait waar mee je dat kan...(althans..De toepassing is anders, maar met wat programmeer werk, kan je invoer van textboxen in een select list gooien...

Python:

<script language="javascript" type="text/javascript">
<!--
var ie = document.all?1:0;
var submited = 0;

function AddToTheList(sFormName ,sFromSelectBox, sDestSelectBox, ButtonAdd, ButtonRem)
{
    var FromSelectBox = document[sFormName][sFromSelectBox];
    var DestSelectBox = document[sFormName][sDestSelectBox];
    var selectedValue = "";
    var selectedText  = "";
    if ( FromSelectBox.selectedIndex < 0)
        {
            alert("U heeft geen item geselecteerd uit de lijst!");
            if (FromSelectBox.options[0] != null)
            FromSelectBox.options[0].selected = true;
            FromSelectBox.focus();
            return false;
        }
    else
        {   var iFromIndex = FromSelectBox.selectedIndex;
            //alert(DestSelectBox.length);
            selectedValue = FromSelectBox.options[iFromIndex].value;
            selectedText  = FromSelectBox.options[iFromIndex].text;
            DestSelectBox.options[DestSelectBox.length] = new Option(selectedText,selectedValue);
        
            //FromSelectBox.options[iFromIndex] = null;
        }
    disapleButtons(sFormName ,sFromSelectBox, sDestSelectBox, ButtonAdd, ButtonRem);
}

function disapleButtons(sFormName ,sFromSelectBox, sDestSelectBox, ButtonAdd, ButtonRem)
{
    var FromSelectBox = document[sFormName][sFromSelectBox];
    var DestSelectBox = document[sFormName][sDestSelectBox];
    if (FromSelectBox.options.length > 0 )
        {
            if (DestSelectBox.options.length < 100)
                document[sFormName][ButtonAdd].disabled = 0;
            else
                document[sFormName][ButtonAdd].disabled = 1;
        }
    else
        document[sFormName][ButtonRem].disabled = 1;
    if (DestSelectBox.options.length > 0)
        document[sFormName][ButtonRem].disabled = 0;
    else
        document[sFormName][ButtonRem].disabled = 1;
}

function putItTogether(sFormName, sDestSelectBox, sDestHiddenField)
{
    var DestSelectBox = document[sFormName][sDestSelectBox];
    var fullList = "";
        
    for(var i = 0; i < DestSelectBox.length; i++) 
        {
            fullList += (DestSelectBox.options[i].value + ","); 
        }
    fullList = fullList.substring(0, fullList.length-1);
    
    document[sFormName][sDestHiddenField].value = fullList;
    document[sFormName].submit();
}

// -->
</script>       
                <form name="ProductForm" action="doeiets" method="post">
                <input type="hidden" name="DestHiddenField" value="">
                <table border="0" cellspacing="0" width="100%">
                    <tr>
                        <td align="center"><!-- haalt alle productem op uit de DB -->
                            <div class="Toelichting">Beschikbare producten</div>
                            <select name="FromProducts" size="5" width="200px" style="width:200px;">
                                <dtml-in getAllProducts>
                                    <option value="<dtml-var iProductID>"><dtml-var ProductNaam></option>
                                </dtml-in>
                            </select>
                        </td>
                        <td align="center"><!-- Knoppen voor het verschuiven van de producten-->
                            <input type="button" value="" name="ProductButtonAdd" class="butNext" 
                                 onClick="AddToTheList('ProductForm','FromProducts','DestProducts','ProductButtonAdd','ProductButtonRem');">
                            <br>
                                     
                            <input type="button" value="" name="ProductButtonRem" class="butPrev" 
                                onClick="RemoveFromTheList('ProductForm','FromProducts','DestProducts','ProductButtonAdd','ProductButtonRem');">
                        </td>
                        <td align="center"><!-- Hier komen dus de geselecteerde producten te staan -->
                            <div class="Toelichting">Geselecteerde producten</div>
                            <select name="DestProducten" size="5" width="200px" style="width:200px;">
                            <!-- als er al een lijste in de DB staat, haal deze dan op -->
                            <dtml-if lProducten>
                                <dtml-in lProdcuten>
                                    <dtml-var sequence-item>
                                    <dtml-in "getProduct(ProductID=_.getitem('sequence-item'))">
                                        <option value="<dtml-var iProductID>"><dtml-var ProductNaam></option>
                                    </dtml-in>
                                </dtml-in>  
                            </dtml-if>
                            </select>
                        </td>
                    </tr>
                </table>
                <input type="button" value="" class="butNext" alt="Stap 2"
                onClick="putItTogether('ProductForm','DestProducts','DestHiddenField');
                         document.{ProductForm.submit();"> 

Ik maar dus hier gebruik van twee select boxen waar ik de linkse gebruik om de rechtste te vullen...best handig

Er zit DTML door heen, maar daar moet je maar even omheen kijken

[Verwijderd]

...Over Javascript:

dominion99 schreef op 02 oktober 2002 @ 14:22:
ja, ok maar dat kan ik niet aanspreken in een asp.net code

Aanspreken??
Genereren, net als de rest van de HTML die je *genereert* met ASP...

Misschien komt het omdat MicroSoft ASP.net een beetje (understatement) ondoorzichtig heeft gemaakt...
Dat mensen daardoor denken dat objecten op pagina's echt "op de server" worden aangesproken.. Het zijn twee separate processen, client en server..

Over aanspreken:
Die javascript beinvloedt dus gewoon die combobox, waarvan je de waarde na submit weer in ASP kunt uitlezen.

[dominion99]

Ok ik heb een er maar een sub voor gemaakt
de textbox is dus autopostback, en bij ontextchanged roep je de functie aan

hier is de code van de Sub

code:

Sub SelectDropDown(sender As Object, e As System.EventArgs)
        'Zet de variabelen 
        Dim Li as ListItem
        Dim DropDownString as String
                
        Dim ZoekCode as String = ZoekCodeText.Text
        Dim lengtezoekcode = len(ZoekCode)
        
        
        'Kijken of de string een lengte van 1 of meer heeft
        If (lengtezoekcode > 0) then
            'Zet eerst het item wat selected is op false, 
            'er kan er maar eentje zijn
            For each Li in zoekcodeSelect.Items
                Li.Selected = false
            Next
            ' Zoek hierna elk item af, 
            For each Li in zoekcodeSelect.Items
                ' Pak van het item van linksaf het aantal letters
                ' wat de zoekstring bevat
                DropDownstring = Left(Li.Text,lengtezoekcode)
                'vergelijk die met elkaar (true wil zeggen case-insensitive )
                ' en stap bij gevonden uit de loop
                If [String].Compare(ZoekCode, DropDownString, true) = 0 Then
                    LI.Selected = True
                    Exit for
                End If
            Next
        End If

Misschien niet de beste oplossing, maar het is best snel ( nog niet getest met 800)

als iemand betere of snellere code heeft dan zeg het maar

[dominion99]

Nee ik snap het verschil wel tussen javascript en asp.net . Maar met een javascript wat ik snel gevonden had, werkte het ook niet perfect. De pagina moet refreshen en er werd niet altijd goed geselecteerd dus dan doe ik het maar zo