可以辅助选择的文本框

组件是辅助选择的文本框，可以使用上下键选择，可以采用自定义数据，可以和后台进行交互，需要用到组件RemoteConn(已贴出)
组件代码：

package pizazz.flex4.component{
	import flash.display.DisplayObjectContainer;
	import flash.events.Event;
	import flash.events.FocusEvent;
	import flash.events.KeyboardEvent;
	import flash.events.TimerEvent;
	import flash.geom.Point;
	import flash.utils.Timer;
	import mx.collections.ArrayCollection;
	import mx.collections.ArrayList;
	import mx.collections.IList;
	import mx.collections.XMLListCollection;
	import mx.events.FlexEvent;
	import mx.events.FlexMouseEvent;
	import mx.events.ListEvent;
	import mx.managers.PopUpManager;
	import mx.rpc.events.ResultEvent;
	import mx.rpc.remoting.RemoteObject;
	import pizazz.flex4.remote.RemoteConn;
	import spark.components.List;
	import spark.components.SkinnableContainer;
	import spark.components.TextInput;
	import spark.events.IndexChangeEvent;

	public class AutoTextInput extends TextInput{
		protected var _param:Object = {};
		protected var _rowCount:uint = 10;
		protected var _popUpList:List;
		protected var _labelField:String = "";
		protected var _dataField:String = "";
		protected var _isCustomData:Boolean = false;
		protected var _dataProvider:IList;
		protected var _wait:uint = 500;
		private var _changeFunction:Function;
		private var _parseFunction:Function;
		private var _isQuickSelect:Boolean = true;
		private var _value:String = "";
		private var _destination:String;
		private var _method:String = "loadName";
		private var _source:IList;
		private var _keyIndex:int = -1;
		private var _container:SkinnableContainer;
		private var _remote:RemoteObject;
		private var _showingPopUp:Boolean = false;
		private var _timer:Timer;
		/**
		 * 设置快速匹配，当输入和自动选择相同时，自动匹配
		 */  
		public function set isQuickSelect(value:Boolean):void{
			_isQuickSelect = value;
		}
		/**
		 * 设置value值，备用取值参数
		 */ 
		public function set value(value:String):void{
			_value = value;
		}
		/**
		 * 获取value值，备用取值参数
		 */ 
		public function get value():String{
			return _value;
		}
		/**
		 * 设置选择时调用函数
		 */ 
		public function set changeFunction(value:Function):void{
			_changeFunction = value;
		}
		/**
		 * 设置自定义解析函数(只对自定义数据源有效)
		 */ 
		public function set parseFunction(value:Function):void{
			_parseFunction = value;
		}
		/**
		 * 设置通道描述
		 */ 
		public function set destination(value:String):void{
			_destination = value;
		}
		/**
		 * 设置查询方法
		 */ 
		public function set method(value:String):void{
			_method = value;
		}
		/**
		 * 设置处理后显示最大数目
		 */ 
		public function set rowCount(value:uint):void{
			_rowCount = value;
		}
		/**
		 * 设置显示字段
		 */ 
		public function set labelField(value:String):void{
			_labelField = value;
		}
		/**
		 * 设置value字段
		 */ 
		public function set dataField(value:String):void{
			_dataField = value;
		}
		/**
		 * 设置查询参数
		 */ 
		public function set param(value:Object):void{
			_param = value;
		}
		/**
		 * 设置自定义数据源
		 */ 
		public function set dataProvider(value:IList):void{
			_source = value;
			_isCustomData = true;
		}
		/**
		 * 获取数据源
		 */ 
		public function get dataProvider():IList{
			return _dataProvider;
		}
		/**
		 * 是否采用自定义设置数据源
		 */ 
		public function set isCustomData(value:Boolean):void{
			_isCustomData = value;
		}

		public function AutoTextInput(){
			super();
			//percentWidth = 100;
			addEventListener(FlexEvent.CREATION_COMPLETE, initHandler);
		}
		/**
		 * 重置连接
		 * @param destination 通道描述
		 * @param param 查询参数
		 * @param method 查询方法
		 */ 
		public function resetRemote(destination:String, 
				param:Object = null, method:String = ""):void{
			if(destination && destination != ""){
				_remote = RemoteConn.getRemote(destination, 
					resultHandler, {"showBusyCursor": false});
				text = "";
				_value = "";
				_param = param;
				if(method != ""){
					_method = method;
				}
			}
		}
		/**
		 * 清除数据
		 */ 
		public function clear():void{
			text = "";
			_value = "";
		}

		override protected function createChildren():void{
			super.createChildren();
			_popUpList = new List();
			_popUpList.labelField = _labelField;
			_container = new SkinnableContainer();
			_container.includeInLayout = false;
			_container.visible = false;
			_container.addElement(_popUpList);
			_timer = new Timer(_wait, 1);
		}

		override protected function focusOutHandler(event:FocusEvent):void{
	        if (_showingPopUp && _container && !event.relatedObject){
	            removeHandler(event);
	        }
	        super.focusOutHandler(event);
	    }

		private function initHandler(event:Event):void{
			if(_destination){
				_remote = RemoteConn.getRemote(_destination, 
					resultHandler, {"showBusyCursor": false});
			}
			setEventListeners();
		}

		private function setEventListeners():void{
			addEventListener(Event.CHANGE, changeHandler);
			addEventListener(KeyboardEvent.KEY_DOWN, downHandler);
			_popUpList.addEventListener(
				IndexChangeEvent.CHANGE, listChangeHandler);
			_container.addEventListener(
				FlexMouseEvent.MOUSE_DOWN_OUTSIDE, removeHandler);
			_container.addEventListener(
				FlexMouseEvent.MOUSE_WHEEL_OUTSIDE, removeHandler);
			_timer.addEventListener(TimerEvent.TIMER, doChangeHandler);
		}

		private function resultHandler(event:ResultEvent):void{
			var _result:Object = event.result;
			if(_result && _result.length > 0){
				var _impl:IList;
				if(_result is String){
					var _xmlList:XMLList = XML(_result).node;
					_impl = new XMLListCollection(_xmlList);
				}else if(_result is ArrayCollection){
					_impl = _result as ArrayCollection;
				}else if(_result is IList){
					_impl = _result as IList;
				}
				if(_impl){
					_showingPopUp = true;
					createHandler(event);
					_popUpList.dataProvider = (_dataProvider = _impl);
					if(_isQuickSelect){
						quickSelect(_impl);
					}
					return;
				}
			}
			removeHandler(event);
		}

		private function changeHandler(event:Event):void{
			_value = "";
			_keyIndex = -1;
			if(text != ""){
				_timer.reset();
				_timer.start();
			}else{
				removeHandler(event);
			}
		}

		private function doChangeHandler(event:TimerEvent):void{
			_param = _param ? _param : {};
			if(_destination != null){
				_param["s"] = text;
				_param["u"] = _rowCount;
				_remote.getOperation(_method).send(_param);
			}else if(_isCustomData){
				var _result:IList = _parseFunction != null ? 
					_parseFunction(_param) : parseCustomData();
				resultHandler(new ResultEvent(ResultEvent.RESULT, 
					false, true, _result));
			}
		}

		private function listChangeHandler(event:Event):void{
			var _out:Object = listSelectHandler();
			if(_changeFunction != null){
				_changeFunction(_out);
			}
			removeHandler(event);
		}

		private function createHandler(event:Event):void{
			_popUpList.width = width;
			_container.width = width;
			//以下参考PopUpButton.as
			var initY:Number;
			var point:Point = new Point(0, unscaledHeight + 0);
			point = localToGlobal(point);
			if (_container.parent == null){
                PopUpManager.addPopUp(_container, this);
                _container.owner = this;
            }else{
            	PopUpManager.bringToFront(_container);
            }
            point = _container.parent.globalToLocal(point);
        	if (point.y + _container.height > screen.height && point.y > 
					(height + _container.height)){ 
                point.y -= (unscaledHeight + _container.height);
                initY = -_container.height;
            }else{
  				initY = _container.height;
  			}
            point.x = Math.min(point.x, screen.width - 
				_container.getExplicitOrMeasuredWidth());
            point.x = Math.max(point.x, 0);
            if (_container.x != point.x || _container.y != point.y){
            	_container.move(point.x, point.y);
            }
			if(!_container.visible){
				_container.visible = true;
			}
			//end
		}

		private function removeHandler(event:Event):void{
			if(_showingPopUp){
				PopUpManager.removePopUp(_container);
				_showingPopUp = false;
				_keyIndex = -1;
			}
		}

		private function listSelectHandler():Object{
			var _item:Object = _popUpList.selectedItem;
			text = _item[_labelField];
			_value = _item[_dataField];
			return _item;
		}

		protected function quickSelect(impl:IList):void{
			var _item:Object = impl.getItemAt(0);
			if(_item[_labelField] == text){
				_value = _item[_dataField];
			}
		}

		protected function downHandler(event:KeyboardEvent):void{
			if(_showingPopUp){
				if(event.keyCode == 40){
					_popUpList.selectedIndex = (_keyIndex = _keyIndex < 
						_dataProvider.length - 1 ? _keyIndex + 1 : 0);
					listSelectHandler();
				}else if(event.keyCode == 38){
					_popUpList.selectedIndex = (_keyIndex = _keyIndex >=
						1 ? _keyIndex - 1 : _dataProvider.length - 1);
					listSelectHandler();
				}else if(event.keyCode == 13){
					listChangeHandler(event);
				}
				event.stopPropagation();
			}
		}

		protected function parseCustomData():IList{
			var _result:IList = new ArrayList();
			var _num:uint = 0;
			var _length:int = _source.length;
			for(var _i:int = 0; _i < _length; _i ++){
				var _item:Object = _source.getItemAt(_i);
				if(_num >= _rowCount){
					break;
				}
				if((_item[_labelField] + "").indexOf(text) != -1){
					_result.addItem(_item);
					_num ++;
				}
			}
			return _result;
		}
	}
}

组件执行：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   xmlns:component="pizazz.flex4.component.*"
			   minWidth="955" minHeight="600" >
	<s:layout>
		<s:VerticalLayout />
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.collections.XMLListCollection;
			import mx.controls.Alert;

			private const xml:XML = 
				<root>
					<node id="a" name="ABC" />
					<node id="b" name="BCD" />
					<node id="c" name="DEF" />
					<node id="d" name="EFG" />
					<node id="e" name="GAB" />
					<node id="f" name="ACE" />
					<node id="f" name="CEG" />
					<node id="f" name="EGB" />
					<node id="f" name="GBD" />
					<node id="f" name="BDF" />
				</root>;

			private const _arr:ArrayCollection = new ArrayCollection([
				{"id": "a", "name": "ABC"},
				{"id": "b", "name": "BCD"},
				{"id": "c", "name": "DEF"},
				{"id": "d", "name": "EFG"},
				{"id": "e", "name": "GAB"},
				{"id": "f", "name": "ACE"},
				{"id": "g", "name": "CEG"},
				{"id": "h", "name": "EGB"},
				{"id": "i", "name": "GBD"},
				{"id": "j", "name": "BDF"}
			]);

			private const _list:XMLListCollection = 
				new XMLListCollection(XMLList(xml.node));
		]]>
	</fx:Script>
	<s:Label text="XMLListCollection格式" />
	<component:AutoTextInput labelField="@name" dataField="@id" 
		rowCount="10" dataProvider="{_list}" />
	<s:Label text="ArrayCollection格式" />
	<component:AutoTextInput id="input" labelField="name" dataField="id" 
		rowCount="10" dataProvider="{_arr}" />
	<mx:Button label="value参数" click="{Alert.show(input.value)}" />
</s:Application>

视图：
[img]http://dl.iteye.com/upload/attachment/344585/b25ba888-d88f-3c17-9956-18cdf6b8ac96.png[/img]