Cornel Creanga

Flex – improve search behavior in ComboBox components

Posted by cornel | Filed under Flex

Updated: After a discussion with the engineering team I filled this bug

The ComboBox component from Flex SDK does not perform a fancy search by default – for example if you press ‘A‘ it will go to the first element starting with ‘A‘, if you press ‘B‘ it will go the first element starting with ‘B‘ but if you press quickly ‘A‘ and ‘B‘ it will not display the first element starting with ‘AB‘ – instead if will display the first one starting with A and after that the one starting with ‘B’. I know that the HTML select control can do that and I’ve heard some people complaining because they are not able to do it in Flex so I planned to wrote the implementation.

There are two cases: the first one is when the drop down list is opened and the user is typing, the second one is when the drop down list is not opened but the focus is positioned on the ComboBox and the user is typing.

For the first case I extended the List component and I wrote a new findKey method. The dropdownFactory property of the ComboBox component will be set to the new class. The code is displayed below:

package com.test
{
    import mx.controls.List;
    public class ListSearch extends List    {
        private var previous:Number;
        private var current:Number;
        private var pressed:String=“”;
        protected override function findKey(eventCode:int):Boolean{
            current = new Date().time;
            if ((current-previous)>500){
                previous = current;
                pressed = String.fromCharCode(eventCode);
                return super.findKey(eventCode);
            }else{
                previous = current;
                pressed = pressed + String.fromCharCode(eventCode);
                return findString(pressed);
            }
        }
    }
}

<mx:ComboBox id=“combo” dropdownFactory=“com.test.ListSearch”>
   <mx:dataProvider>
      <mx:Array>
         <mx:String></mx:String>
         <mx:String>AAAAAAAA</mx:String>
         <mx:String>ABBBBBBB</mx:String>
         <mx:String>ACCCCCCC</mx:String>
         <mx:String>BBBBBBBB</mx:String>
         <mx:String>CCCCCCCC</mx:String>
       </mx:Array>
   </mx:dataProvider>
</mx:ComboBox>

The second case proved to be much difficult..I do not know if I will be able to do it without rewriting the entire ComboBox component – too many of methods and members have the private access modifier so extending is not a solution. I’m still wondering how to do it.

I’m curious if anyone experienced this problem when trying to modify the default behavior of the ComboBox component (or another Flex component).

2 Responses to “Flex – improve search behavior in ComboBox components”

Dimitrios Gianninas Says:
August 30th, 2008 at 2:25 am Hi, Yes I have modified the TextInput component to do the exact what you are talking about. Actually I got the idea from this old blog post: http://weblogs.macromedia.com/sho/archives/2006/04/new_version_of.html

Also the ComboBox has already been modified as such, just look here on the Adobe Exchange: http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1047291
cornel Says:
August 30th, 2008 at 10:41 am Hi Dimitrios,

Thanks for letting me know - it’s very close to what I’m looking for. I will try to see if I can modify a little bit the current behavior (to add a dropdown arrow).