flex中扩展combobox功能

 近段时间在忙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格式在类中已有说明

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值