近段时间在忙flex的东西,边学习边使用。里边有个ComboBox,类似html中的select,由于业务的需求在ComboBox的基础上,增加了模糊查询的功能,便于以最快的方式找到需要选中的项,跟大家分享一下,源代码如下:
package mycomponent
{
import mx.controls.ComboBox;
import flash.events.Event;
import flash.events.TextEvent;
import mx.controls.TextInput;
import mx.controls.ComboBase;
import mx.core.IDataRenderer;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.mx_internal;
import mx.collections.ArrayCollection;
use namespace mx_internal;
/**
* 该类实现下拉列表的模糊匹配
*/
public class AutoCompleteComboBox extends ComboBox implements IDataRenderer, IDropInListItemRenderer,
IListItemRenderer
{
/**
* 格式:node节点中至少含有name属性
* <nodes>
* <node name="" ..../>
* </nodes>
*/
public var nodesXmlStr:String = "";
private var filterNodesXmlObj:XML = <nodes></nodes>;
private var selectedFlag:Boolean = true;
public function AutoCompleteComboBox():void{
super();
init();
}
private function init():void{
this.createChildren();
}
override protected function textInput_changeHandler(event:Event):void{
super.textInput_changeHandler(event);
//trace("###");
searchMatchest();
}
override public function set selectedIndex(value:int):void{
if(selectedFlag){
super.selectedIndex = value;
}
selectionChanged = false;
invalidateDisplayList();
//trace(selectedIndex);
}
override public function set dataProvider(value:Object):void{
if(selectedFlag){
selectionChanged = true;
}
else{
selectionChanged = false;
}
//trace("######"+XMLList(value).toXMLString());
super.dataProvider = new ArrayCollection();
super.dataProvider = value;
}
private function searchMatchest():void{
//trace(nodesXmlStr);
if(nodesXmlStr!=""){
selectedFlag = false;
var inputValue:String = textInput.text;
var xmlList:XMLList = XMLList(XML(nodesXmlStr).node);
var nodeNum:uint = xmlList.length();
//trace(nodeNum);
//trace("inputValue="+inputValue);
if(inputValue==""){
this.dataProvider = XML(nodesXmlStr).node;
//trace("all="+nodesXmlStr);
}
else{
filterNodesXmlObj = <nodes></nodes>;
for(var nodeIndex:uint = 0 ; nodeIndex < nodeNum ; nodeIndex++){
var xmlObj:XML = XML(xmlList[nodeIndex]);
//trace(String(xmlObj.attribute("name")).indexOf(inputValue));
//trace(String(xmlObj.attribute("name")));
if(String(xmlObj.attribute("name")).indexOf(inputValue)>-1){
//trace(String(xmlObj.attribute("name")).indexOf(inputValue));
//trace(String(xmlObj.attribute("name")));
filterNodesXmlObj.appendChild(xmlObj);
}
}
this.dataProvider = filterNodesXmlObj.node;
}
dropdown.selectedIndex = -1;
dropdown.verticalScrollPosition = 0 ;
open();
selectedFlag = true;
}
}
private function get nodesStr():String{
return this.nodesXmlStr;
}
private function set nodesStr(str:String):void{
this.nodesXmlStr = str;
}
}
}
使用方式,在mxml文件的标签里边直接用<mycomponent:AutoCompleteComboBox nodesXmlStr=""/>即可
注意:nodesXmlStr这个属性一定要设置,设置为AutoComplete的数据源的xml字符串,xml格式在类中已有说明