学步园

package app.lib
{
	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;  
	  } 
 }  

}

设计思路

　　思路比较简单，组件分成两个部分，1文本框；2提示的下拉列表；

　　自动提示：

　　在文本框中输入文字时，在数据源（所有的提示项）查找匹配的选项，若匹配的选项数量>0，在文本框下方显示下拉列表供用户选择；

　　自动补全：

　　在匹配的选项中选择最合适的一项（通常为第一项），与用户输入做对比，将用户未完成输入的字符补全到文本框中去，并将补全部分字符设置为选中状态；（为什么要处于选中状态，假如补全文字不是用户所需要的，用户只要再往下输文字就可以了，而不用手动删除补上去的文字）