[HTML] combobox, handmatig optie selecteren

[Pascal Saul]

112121122123124123412345

Hoe kan ik in IE/FF zorgen dat ik handmatig de juiste rij kan kiezen in de combobox?

Voorbeeld: Ik wil "123" selecteren door achtereen volgend 1, 2 en 3 te typen.

Vooral wanneer de combobox veel waarden bevat wordt het selecteren (zoeken) steeds lastiger. Is hier een oplossing voor?

[ Voor 7% gewijzigd door Pascal Saul op 20-06-2006 23:46 ]

[Koppensneller]

Door middel van AJAX de lijst refreshen bij elke toetsaanslag? Dat zou een beetje lijken op Googel Suggest, of de invoer van een station op de NS site.

[ Voor 42% gewijzigd door Koppensneller op 20-06-2006 23:30 ]

[crisp]

Firefox doet dat standaard al

Edit: Opera ook

[ Voor 26% gewijzigd door crisp op 20-06-2006 23:35 ]

[Verwijderd]

Denk dat je daarvoor toch toetsaanslagen moet gaan afvangen, anders gebruikt de toets als beginletter. Wel kan je meerdere malen die letter indrukken om door het lijstje heen te gaan.

[Calamor]

Lijk me dat het met een Java script wel kan. Anders misschien ff Googlen. Maar wat voor zelf onderzoek heb je gedaan? Want dat hoort er bij als je een topic opent.

[Pascal Saul]

crisp schreef op dinsdag 20 juni 2006 @ 23:31:
Firefox doet dat standaard al
Edit: Opera ook

Firefox gaat er niet helemaal goed mee om. Soms lijkt het goed te gaan maar is toch niet zoals ik verwacht.

Calamor schreef op dinsdag 20 juni 2006 @ 23:35:
Lijk me dat het met een Java script wel kan. Anders misschien ff Googlen. Maar wat voor zelf onderzoek heb je gedaan? Want dat hoort er bij als je een topic opent.

Ik open pas een topic als ik het zelf niets kan vinden erover.

Oftewel Google en de GoT-search en W3schools...

AJAX dacht ik zelf aan maar dan zit je met probleem dat je weer terug moet kunnen.
Hoe onthoud AJAX dat je op positie drie bijvoorbeeld moet zoeken

[Koppensneller]

Pascal Saul schreef op dinsdag 20 juni 2006 @ 23:43:


AJAX dacht ik zelf aan maar dan zit je met probleem dat je weer terug moet kunnen.
Hoe onthoud AJAX dat je op positie drie bijvoorbeeld moet zoeken

Je kunt gewoon telkens de hele string meesturen die al ingevuld is

[Pascal Saul]

KoppenSneller schreef op dinsdag 20 juni 2006 @ 23:50:
[...]

Je kunt gewoon telkens de hele string meesturen die al ingevuld is

En werkt backspace dan ook? Als je per ongeluk op de verkeerde positie zit?

Ik tik 1,2,1 dan ben ik bij waarden die beginnen bij 121x.

Hoe kan ik nu terug naar 12x? Of verder naar 1212x?

Even de technische kant:

Ik laad standaard de combobox met alle waarden. Wanneer men de combobox selecteert heb ik op de achtergrond een lege string (search string). Als ik nu een toets aanslag doe wordt er een event getriggered in de combobox die zorgt dat de ingetoetste key in de lege string komt. Deze string is de basis voor de waarden die weer gegeven gaan worden...Op dat moment wordt doormiddel van AJAX de combobox gerefreshed met alle waarden die beginnen met de string. Met backspace wordt dan de laatste letter van de string gehaald om terug te keren. Zou zoiets kunnen?

[ Voor 47% gewijzigd door Pascal Saul op 21-06-2006 00:04 ]

[Koppensneller]

Wil je het perse met een combobox doen, en wil je het ook zelf maken? Er zijn namelijk genoeg kant-en-klare javascript componentjes die dit prima kunnen. Een van de mooiere is deze:

http://demo.script.aculo.us/ajax/autocompleter

[Alex)]

Pascal Saul schreef op dinsdag 20 juni 2006 @ 23:54:
[...]


En werkt backspace dan ook? Als je per ongeluk op de verkeerde positie zit?

Ik tik 1,2,1 dan ben ik bij waarden die beginnen bij 121x.

Hoe kan ik nu terug naar 12x? Of verder naar 1212x?

Even de technische kant:

Ik laad standaard de combobox met alle waarden. Wanneer men de combobox selecteert heb ik op de achtergrond een lege string (search string). Als ik nu een toets aanslag doe wordt er een event getriggered in de combobox die zorgt dat de ingetoetste key in de lege string komt. Deze string is de basis voor de waarden die weer gegeven gaan worden...Op dat moment wordt doormiddel van AJAX de combobox gerefreshed met alle waarden die beginnen met de string. Met backspace wordt dan de laatste letter van de string gehaald om terug te keren. Zou zoiets kunnen?

JavaScript:

var e=event.keyCode
if(e == backSpaceKeyCode)
{
  query = query.substring(0, query.length - 1);
}

Daarmee pak je alle karakters behalve de laatste

Je moet wel even zelf zoeken naar de backSpaceKeyCode enzo

[ Voor 4% gewijzigd door Alex) op 21-06-2006 00:13 ]

[Pascal Saul]

Ik heb het inderdaad nu met AJAX gemaakt volgens http://www.dhtmlgoodies.c...ge=ajax#ajax_dynamic_list

Demo: http://www.dhtmlgoodies.c...st/ajax-dynamic-list.html

Het werkt naar behoren alleen vind ik het jammer dat de foutcontrole weg is.

Volgens de huidige methode was het niet nodig om te kijken of het adres daadwerkelijk bestaat. Nu moet dat wel omdat het input field een search field geworden is.

[funkwurm]

Iedereen vind Ajax zo leuk, dat het als oplossing wordt opgegooit waar maar kan. In dit probleem is er helemaal niks dat je on-the-fly van de server zou willen lezen, je zegt namelijk alle waardes al in de select te hebben. Wat wou je dan nog van de server af ajaxen?

Het idee is dat je bij elke toetsaanslag de bijbehorende letter/cijfer/teken toevoegd aan een variabele en kijkt of er een waarde in de select is die met de inmiddels verkregen string begint.

Het is dan vrij makkelijk om de backspace-toets in te bakken, of bijvoorbeeld de del-toets om weer helemaal overnieuw te beginnen.

[Pascal Saul]

funkwurm schreef op woensdag 12 juli 2006 @ 20:59:
Iedereen vind Ajax zo leuk, dat het als oplossing wordt opgegooit waar maar kan. In dit probleem is er helemaal niks dat je on-the-fly van de server zou willen lezen, je zegt namelijk alle waardes al in de select te hebben. Wat wou je dan nog van de server af ajaxen?

Het idee is dat je bij elke toetsaanslag de bijbehorende letter/cijfer/teken toevoegd aan een variabele en kijkt of er een waarde in de select is die met de inmiddels verkregen string begint.

Het is dan vrij makkelijk om de backspace-toets in te bakken, of bijvoorbeeld de del-toets om weer helemaal overnieuw te beginnen.

Ik gebruik het niet omdat ik het leuk vind maar dat het wel de oplossing is voor mij op dit moment.

Ik sta open voor je oplossing dus ben erg benieuwd hoe deze eruit gaat zien.

Voorbeeldje?

[t-x-m]

Allereerst sorry voor de kick, maar ik vanmorgen het zelfde probleem als de ts, ging zoeken en kwam oa hier terecht maar vond dus geen directe oplossing.

Ben toen zelf maar aan een oplossing begonnen, dat is redelijk gelukt. Vandaar dat ik het hier post.

Wel heb ik nog een vraag, als je nu de waarden intyped loopt het nog niet heel mooi (test maar @ dit adres).

JavaScript:

<script type="text/javascript">
    var keystroke = "";
    function selecteer_item(o_select,e)
    {
        // Eerste(lege) option selecteren, anders lijkt het net alsof hij gaat naar
        //  het item waarvan de eerste letter gelijk is aan de ingetoetste letter
        //  wat wij juist willen afvangen met deze functie
        o_select.selectedIndex=0;
        
        // Ingevoerde keycode afvangen ( IE gaat hier anders mee om dat 'moderne' rowsers, vandaar deze regels )
        var evtobj=window.event? event : e; 
        var unicode=evtobj.charCode? evtobj.charCode : evtobj.keyCode;
            // Backspace of delete key afvangen, de (eerder) ingevoerde keystroke hier op aanpassen
        //  backspace is laatste teken er af
        //  delete is hele stroke wissen
        if (unicode==8) // backspace
        {
            keystroke = keystroke.substring(0,keystroke.length-1);
            return;
        }
        if (unicode==46) // delete
        {
            keystroke = "";
            return;
        }

        // Omzetten van cijfercode naar letter
        var actualkey=String.fromCharCode(unicode);

        // Nieuwe letter achter huidige keystroke zetten
        keystroke = keystroke + actualkey;
            
        var aantal_items_in_select = o_select.length;
        var selectbox_options = o_select.options;

        var max_gevonden_lengte=0;

        // Loop door alle <option>'s in <select> heen
        for(i=0; i<aantal_items_in_select; i++)
        {
            // Bij de volledige invoer beginnen bv: asdfg
            //  komt deze niet overeen met huidige optie probeer de volgende keer asdf enz...
            for (q=keystroke.length;q>1;q--)
            {
                var option_value = selectbox_options[i].label.substring(0,q).toLowerCase();
                var input_string = keystroke.substring(0,q).toLowerCase();

                // Altijd meest lange mogelijkheid gebruiken
                if(option_value == input_string && max_gevonden_lengte <q)
                {
                    o_select.selectedIndex=i;
                    max_gevonden_lengte = q;
                }
            }
        }
        return;
    }
</script>

HTML:

<select name="selnaam" onkeyup="selecteer_item(this,event);">
   <option value="" label=""></option>
   <option value="v_1" label="1">1</option>
   <option value="v_12" label="12">12</option>
   <option value="v_122" label="122">122</option>
   <option value="v_123" label="123">123</option>
</select>