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

    CombBox itemMatchingFunction

    bkhatl Community Member

      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!

       

      Thanks,

      Brenda

       

        Here are some snippets of my code:

       

              public function FilteredComboBox() {
                  super();
                  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) {
                          results.push(idx);
                      }
                  }
                  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 Community Member

            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:s="library://ns.adobe.com/flex/spark"
                           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
                <fx:Declarations>
                    <!-- Place non-visual elements (e.g., services, value objects) here -->
                </fx:Declarations>
                <fx:Script>
                    <![CDATA[
                        import mx.collections.ArrayCollection;
                       
                        import spark.events.IndexChangeEvent;
                        import spark.events.TextOperationEvent;
                       
                        [Bindable]
                        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)
                            {
                                cb.textInput.addEventListener(TextOperationEvent.CHANGE,changeHandler);
                                flag = false;
                            }
                           
                            // TODO Auto-generated method stub
                        }
                       
                        private function changeHandler(e:*):void
                        {
                            cb.textInput.removeEventListener(TextOperationEvent.CHANGE,changeHandler);
                            arrC.filterFunction = doFilter;
                            arrC.refresh();
                            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;
                        }
                    ]]>
                </fx:Script>
               
                <s:ComboBox id="cb" dataProvider="{arrC}"  updateComplete="cb_changeHandler()"/>
            </s:Application>