ComboBox實現輸入自動過濾

package com.beyondsoft   
{   
    import flash.events.Event;   
       
    import mx.collections.ArrayCollection;   
    import mx.controls.Alert;   
    import mx.controls.ComboBox;   
    import mx.events.FlexEvent;   
    import mx.utils.StringUtil;   
       
    /**  
     * ComboBox過濾自動完成組件  
     * @author 韓敬諾   
     *   
     */  
    public class AutoCompleteComboBox extends ComboBox   
    {   
        public function AutoCompleteComboBox()   
        {   
            if(!width){   
                //如果沒有指定width則設置默認的寬度   
                width=120;   
            }   
            setStyle("paddingLeft","0");   
            selectedIndex=-1;   
            editable=true;   
            addEventListener("creationComplete",init);   
        }   
        private var ac:ArrayCollection;//保存數據源   
           
        /**  
         *   
         * @param event  
         *   
         */  
        private function init(event:Event):void{   
            ac=dataProvider as ArrayCollection;   
        }   
        /**  
         * 重寫下三角按鈕的點擊事件  
         * @param event  
         *   
         */  
        override protected function downArrowButton_buttonDownHandler(event:FlexEvent):void{   
            dataProvider=ac;   
            super.downArrowButton_buttonDownHandler(event);   
        }   
        /**  
         * 當輸入框中的值發生變化時開始過濾  
         * @param event  
         *   
         */  
        override protected function textInput_changeHandler(event:Event):void{   
            super.textInput_changeHandler(event);   
            //當數據源不爲空並且關鍵字不爲空時開始搜索數據源   
            if(ac){   
                var keyWord:String=StringUtil.trim(textInput.text);   
                if(keyWord){   
                    searchKeyWord(keyWord);    
                }   
            }   
        }   
        /**  
         *   
         * @param keyWord關鍵字  
         *   
         */  
        private function searchKeyWord(keyWord:String):void{   
            var dp:ArrayCollection=filterData(ac);   
            //當數據源改變的時候   
            if(dp.length>0){   
                dataProvider=dp;   
                dropdown.selectedIndex=-1;   
                dropdown.verticalScrollPosition=0;   
                textInput.setFocus();   
                //注意先設置關鍵字被選中後打開下拉列表   
                textInput.setSelection(keyWord.length,keyWord.length);   
                open();   
            }else{   
                dataProvider=ac;   
                textInput.text="";   
                selectedIndex=-1;   
                close();   
            }   
        }   
        /**  
         *   
         * @param item  
         * @return   
         *   
         */  
        private function filterData(ac:ArrayCollection):ArrayCollection{   
            var dp:ArrayCollection=new ArrayCollection();   
            for(var i:int=0;i<ac.length;i++){   
                var item:Object=ac.getItemAt(i);   
                if(item.hasOwnProperty(labelField)){   
                    var value:String=item[labelField];   
                    if(value.indexOf(textInput.text)!=-1){   
                        dp.addItem(item);   
                    }   
                }   
            }   
            return dp;   
        }   
    }   
}  

 

 

網上雖然有很多例子，但是寫的都有很多bug，因此自己動手寫了個組件。出現了一個難點就是如何點擊下三角的時候數據源全部出來，看了ComboBox後才知道是這個方法downArrowButton_buttonDownHandler，因此重寫這個方法就ok了。

思路：1監聽textInput_changeHandler事件

          2 對數據源進行過濾

          3 重寫下三角的點擊事件

 

以上代碼不是FLEX4的代碼，使用時需改動