一个带过滤功能的combobox组件

 

AS代码如下：

package com.dfmcsoft.test
{
    import flash.events.Event;
   
    import mx.collections.ArrayCollection;
    import mx.controls.ComboBox;

    public class FilterComboBox extends ComboBox
    {
        public function FilterComboBox()
        {
            super();
            this.editable=true;
        }

        override protected function textInput_changeHandler(event:Event):void{
          super.textInput_changeHandler(event);
          FilterByKey(event);
        }

        //过滤数据
        private function FilterByKey(event:Event):void{
            var tempDataProvider:ArrayCollection = this.dataProvider as ArrayCollection;
            if (tempDataProvider == null) return;
            this.dataProvider.filterFunction = filterFunction;
            var tempstr:String = this.text;
            if(tempDataProvider.refresh()){
                this.dropdown.selectedIndex = -1;
                this.dropdown.verticalScrollPosition = 0;
                this.text = tempstr;
                this.open();
                this.textInput.setFocus();
               this.textInput.setSelection(tempstr.length,tempstr.length);
           
            }
        }
        private function filterFunction(item:Object):Boolean{
            return item['label'].toString().indexOf(this.text)!=-1;
        }
       
}

 

测试的MXML如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  xmlns:ns1="com.dfmcsoft.test.* " fontSize="13">
<mx:scriptt>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var cards:ArrayCollection = new ArrayCollection(
                [ {label:"张一", data:1},
                  {label:"张二", data:2},
                  {label:"张三", data:3},
                  {label:"李四一", data:1},
                  {label:"李五一", data:1},
                  {label:"王六二", data:1} ]);   
        ]]>
    </mx:scriptt>

    <mx:Panel title="ComboBox Control Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
      <ns1:FilterComboBox x="57" y="130" dataProvider="{cards}"/>      
    </mx:Panel>   

</mx:Application>

注意：数据源一定是集合数组类型的，我尝试用了<mx:XML>定义数据源，结果没好用！