2 Replies Latest reply: Apr 8, 2011 7:42 AM by Ronak Porwal RSS

    CombBox itemMatchingFunction


      I have extended a ComboBox for 2 major reasons, specialized skinning and to provide for custom item matching.  I'm having a problem with the itemMatchingFunction.  I can see the function being invoked and the appropriate items included and excluded from the resultant vector.  But what is being displayed is still the entire list if items in the data provider.  Any comments, questions or suggestions would be appreciated!





        Here are some snippets of my code:


              public function FilteredComboBox() {
                  this.openOnInput = true;
                  this.itemMatchingFunction = matchingFunction;


              public function matchingFunction(cb:ComboBox, text:String):Vector.<int> {
                  var results:Vector.<int> = new Vector.<int>;
                  var item:String;
                  var entered:String = text.toLowerCase();
                  var itemIdx:int;
                  for(var idx:int = 0; idx < cb.dataProvider.length; idx++) {
                      item = cb.dataProvider.getItemAt(idx) as String;
                      item = item.toLowerCase();
                      itemIdx = item.indexOf(entered);
                      if(item.indexOf(entered) > -1) {
                  return results;

        • 1. Re: CombBox itemMatchingFunction
          Flex harUI Adobe Employee

          I don't think the matchingFunction also shrinks the number of entries in the

          dropdown.  I think it just highlights one but shows all of them.


          There's another post today where someone is filtering their own

          ArrayCollection in order to get the number of dropdown entries to shrink.

          • 2. Re: CombBox itemMatchingFunction
            Ronak Porwal

            Try the below sample code for the scenario required. This might be helpful.



            <?xml version="1.0" encoding="utf-8"?>
            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
                    <!-- Place non-visual elements (e.g., services, value objects) here -->
                        import mx.collections.ArrayCollection;
                        import spark.events.IndexChangeEvent;
                        import spark.events.TextOperationEvent;
                        private var arrC:ArrayCollection = new ArrayCollection([{label:'Ronak'},{label:'Virat'},{label:'Ronaksdfsdfsf'},{label:'Ronaksdf sdf'},{label:'Ronak'},{label:'Ronak'},{label:'Ronak'},{label:'Ronak'},{label:'Ronak'},{lab el:'Ronak'},{label:'Ronak'}]);


                        private var flag:Boolean = true;
                        protected function cb_changeHandler():void
                            if(flag == true)
                                flag = false;
                            // TODO Auto-generated method stub
                        private function changeHandler(e:*):void
                            arrC.filterFunction = doFilter;
                            flag = true;


                        private function doFilter(item:Object):Boolean
                            if(String(item.label).toLowerCase().indexOf(cb.textInput.text.slice(0,cb.textInput.select ionAnchorPosition).toLowerCase())>-1)
                                return true;
                            return false;
                <s:ComboBox id="cb" dataProvider="{arrC}"  updateComplete="cb_changeHandler()"/>