DropDownList selection behavior when using keyboard in Air/Flex

Let's say I have a DropDownList with the 50 states in it. I would like to type in the letters "C + O + L" to jump to Colorado, like Firefox and most application do.

Right now, it's jumping from California to Ohio to end with Louisiana... Anybody know an easy way to do that?

Thanks a lot!开发者_StackOverflow

You could try to create a custom component that extends the DropDownList and override the offending function to add your own functionality that you want. It's the only way I can think of changing the default functionality.

Like @J_A_X proposed, I modified the DropDownList class, adding a timer that keeps the string that the user is typing for ¾ seconds and then, reset it. Here's my solution :

package MyComps
{
    import flash.events.TimerEvent;
    import flash.utils.Timer;
    import flash.utils.setTimeout;

import mx.core.mx_internal;

import spark.components.DropDownList;

use namespace mx_internal;

public class DropDownListKeyboardSelection extends DropDownList
{

    private var _duration:Number = 750; // Time in milliseconds before the _str is resetted
    private var _timer:Timer;
    private var _str:String = '';

    public function DropDownListKeyboardSelection()
    {
        super();
    }

    override mx_internal function findKey(eventCode:int):Boolean
    {
        if (!dataProvider || dataProvider.length == 0)
            return false;

        if (eventCode >= 33 && eventCode <= 126)
        {
            var matchingIndex:Number;
            var keyString:String = String.fromCharCode(eventCode);

            // Freshly instantiated or resetted by timerEnded(). In that case, we start the timer
            if (_str == '') {
                startTimer();
            }   else {
                _timer.reset();
                startTimer();
            }

            // Building the string to find
            _str += keyString;

            matchingIndex = findStringLoop(_str, 0, dataProvider.length); 

            // We didn't find the item, loop back to the top 
            if (matchingIndex == -1)
            {
                matchingIndex = findStringLoop(keyString, 0, 0); 
            }

            if (matchingIndex != -1)
            {
                if (isDropDownOpen)
                    changeHighlightedSelection(matchingIndex);
                else
                    setSelectedIndex(matchingIndex, true); 

                return true;
            }

        }

        return false;
    }

    // Let's start the _timer
    private function startTimer():void
    {
        _timer = new Timer(_duration);  
        _timer.addEventListener(TimerEvent.TIMER, timerEnded);
        _timer.start();
    }

    // Timer ended, let's reset the _str variable
    private function timerEnded(event:TimerEvent):void
    {   
        _str = '';
        _timer.reset();
    }

} 
}

I believe this is dependant on the browser (if using the standard list element). You could create an autocomplete field through jquery (although this isn't the same as a drop down list).