Flex文本框自動提示(AutoSuggest)、自動完成(AutoComplete)

同事做的。

package com.controls
{
 import flash.events.Event;
 import flash.events.FocusEvent;
 import flash.events.KeyboardEvent;
 import flash.ui.Keyboard;
 
 import mx.collections.ICollectionView;
 import mx.controls.ComboBox;
 import mx.core.UIComponent;
 
 
 public class AutoComplete extends ComboBox
 {
  public function AutoComplete()
  {
   super();
   init();
  }
  
  private function init(){
   editable=true;
   rowCount=5;
   selectedIndex=-1;
   isTextBoxStringChange=false;
   isfocusInDropDown=false;
   isAutoComplete=false;
   //僞裝成TextBox
   setStyle("cornerRadius",0);
   setStyle("arrowButtonWidth",0);
   setStyle("fontWeight","normal");
   setStyle("paddingLeft",0);     
  }
  
  
  
  //獲得焦點時，是否自動彈出下拉框，get set
  private var isfocusInDropDown:Boolean=false;
   
  //是否自動完成,get set
  private var isAutoComplete:Boolean=false;
  
  //類默認過濾函數,get set
  private var _filterFunction:Function = myFilterFunction;
  
  //文本是否發生了變化
  private var isTextBoxStringChange:Boolean=false;
  
  //按下的鍵是否是退格鍵
  private var isBackSpaceKeyDown:Boolean=false;
  
  /**
   * 處理退格鍵按下的情況
   */  
  override protected function keyDownHandler(event:KeyboardEvent):void
  {
   if(!event.ctrlKey&&!event.shiftKey)
   {
    if(event.keyCode == Keyboard.BACKSPACE)
    {
     close();
     isBackSpaceKeyDown=true;
    }
    else
    {
     isBackSpaceKeyDown=false;
    }
    //當按UP鍵向上選擇時，到達最頂時，顯示用戶原來所需文字
    if(event.keyCode == Keyboard.UP && selectedIndex==0)
    {
     selectedIndex=-1;
    }        
   }
   super.keyDownHandler(event);
  }  
  
  /**
   * 數據源發生變化,數據不爲0彈出下拉列表
   */ 
  override protected function collectionChangeHandler(event:Event):void
  {
   super.collectionChangeHandler(event);
   if(dataProvider.length>0)
   {
    open();
   }
  }
  
  /**
   * 獲得焦點
   */ 
  override protected function focusInHandler(event:FocusEvent):void{
   if(isfocusInDropDown) open();
   //
   super.focusInHandler(event);
  }
  
  /**
   * 文本發生變化時,觸發查找匹配項的方法，重寫父類的textInput_changeHandler(event:Event)事件。
   */ 
  override protected function textInput_changeHandler(event:Event):void
  {
   if(textInput.text == ""){
    isTextBoxStringChange=false;
   }
   else{   
    isTextBoxStringChange=true;
   }
   super.textInput_changeHandler(event);
   invalidateProperties();//調用該方法，隨後會觸發調用commitProperties()
  }
  
  override protected function commitProperties():void{
   if(isTextBoxStringChange){
    prompt=text;
    filter();       //進行匹配項的查找,假如控件指定了要進行自動補全則進行自動補全操作。
    if(isAutoComplete&&!isBackSpaceKeyDown){
     var autoCompleteString:String="";
     if(dataProvider.length>0)
     {
      autoCompleteString=itemToLabel(dataProvider[0]);
      textInput.setSelection(prompt.length,autoCompleteString.length);
      prompt=autoCompleteString;             
     } 
     else{

     //輸入文本框的文字顯示不出來，因爲系統默認將光標一直放在第一個位置，造成用戶輸入的文字被取消掉，所以在即使不需要補全是，也要進行
      textInput.setSelection(textInput.selectionEndIndex,textInput.selectionEndIndex);
     }
    }
    else{
     textInput.setSelection(textInput.selectionEndIndex,textInput.selectionEndIndex); 
    }
   }    
   super.commitProperties();
  }
  
  /**
   * 與TextBox同樣的寬度
   */ 
  override protected function measure():void
  {
   super.measure();
   measuredWidth=UIComponent.DEFAULT_MEASURED_WIDTH; 
  }
  
  /**
   * 過濾操作
   */ 
  private function filter():void{
   var tmpCollection:ICollectionView = dataProvider as ICollectionView;
   tmpCollection.filterFunction = _filterFunction;
   tmpCollection.refresh();
  }
  
  /**
   * 過濾函數
   */ 
  private function myFilterFunction(item:Object):Boolean
  {
   var myLabel:String = itemToLabel(item);
   if(myLabel.substr(0,text.length).toLowerCase() == prompt.toLowerCase())
   {
    return true;
   }
   return false;
  }
  
  /************************Get Set 屬性**********************************/
  
  public function get FilterFunction():Function{
   return _filterFunction;
  }
  
  public function set FilterFunction(filterFunction:Function):void{
   _filterFunction=filterFunction;
  }
  
  
  public function get IsfocusInDropDown():Boolean{
   return isfocusInDropDown;
  }
  
  public function set IsfocusInDropDown(value:Boolean):void{
   isfocusInDropDown=value;
  }
  
  public function get IsAutoComplete():Boolean{
   return isAutoComplete;
  }
  
  public function set IsAutoComplete(value:Boolean):void{
   isAutoComplete=value;
  }  

 }
}

 

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:controls="com.controls.*" >
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;  
   [Bindable]
   private var values:ArrayCollection = new ArrayCollection(["你好","你們好","Abc","Axx","Ddd cc","xxx yyy","北京",
               "廣東 廣州","Bxx Baa","上海","張三","李四","Aadla","Asf sf",
               "Bxv sfs","Abort XXX","Asp Php"]);
  ]]>
 </mx:Script>
 <mx:Style> 
  .ChineseFont{ 
  fontFamily:”Verdana”,”宋體”; 
  fontSize:12; 
  }
  Application{
   fontSize:12;
  }
 </mx:Style>
 <mx:HBox>
  <mx:CheckBox label="獲取焦點彈出下拉框" id="focusDrop"/>
  <mx:CheckBox label="自動補全文字" id="auto"/>   
 </mx:HBox>
 <controls:AutoComplete styleName="ChineseFont" id="autoComplete1" dataProvider="{values}" IsfocusInDropDown="{focusDrop.selected}" IsAutoComplete="{auto.selected}" />
</mx:Application>