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 重写下三角的点击事件

 

评论

6 楼 meetyourmm 2011-12-25  

你的这个例子  还是有些bug
只能输入一次 输完之后 textInput.text的值自动选择了数据源的第一个 不能输入第二个单词 而且获得textInput焦点 使得再次输入将重新替换textInput.text的值

点击下拉(即你说的下三角) 就有数据  其实很简单  只需要在触发textInput_changeHandler事件前 将dataProvider赋值 并selectIndex = -1；

5 楼 空谷悠悠 2011-04-15  

你好，为什么我这行报错呢？提示setSelection方法未定义
textInput.setSelection(keyWord.length,keyWord.length);
即使我引入了import mx.core.ITextInput包，仍然无效。
另外textInput是内置的对象引用吗？这里好像也没有明确的声明，假如我用
new TextInput().setSelection()似乎就可以了。

4 楼 远去的渡口 2010-11-05  

为什么我重写downArrowButton_buttonDownHandler，总是报"标记为override方法必须覆盖另一方法" 这个错误，编译都通不过。

3 楼 bxl994 2010-06-24  

有问题，下拉列表选择一个项后，比如选择第二个数据后，再点击下拉列表后，当前选择的项又变成第一个了，应该将当前选择项的索引记录下来，然后每次点击下拉的时候把selectIndex赋值回去

2 楼 yunzhongxia 2010-04-09  

initNodename

telestar789 写道

您好，我一开始是这样使用这个控件的：
<myutil:AutoCompleteComboBox id="varNameAutoCombo"
dataProvider="{valueVarName}" labelField="nodename"
initialize="initNodename()"
change="filterNameCombo()"/>

init后有数据，但是下拉菜单后就是空的，如果注释掉downArrowButton_buttonDownHandler中的dataProvider=ac;就有数据，请问您知道问题出在哪里吗？

你好，我这里测试是没有问题的，能否把你的代码贴出来一起研究下那的原因。

1 楼 telestar789 2010-04-08  

您好，我一开始是这样使用这个控件的：
<myutil:AutoCompleteComboBox id="varNameAutoCombo"
dataProvider="{valueVarName}" labelField="nodename"
initialize="initNodename()"
change="filterNameCombo()"/>

init后有数据，但是下拉菜单后就是空的，如果注释掉downArrowButton_buttonDownHandler中的dataProvider=ac;就有数据，请问您知道问题出在哪里吗？