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>