flex 中类似Google的提示下拉菜单实现

 

  项目中使用类似Gooogle输入提示菜单的实现如下

1.首先针对的ComboxBox的封装类

2.在页面导入组件使用：

备注：此处的

dataProvider为数据源提供器

labelFunction 为显示字符串的的格式函数

filterFunction 表示为过滤函数

rowCount 表示每次显示的个数

 

在页面中使用如下：

views：表示页面中导入的包的信息

 

<views:FilterComboBox  id="CITY_CODE" dataProvider="{cityCol}" labelFunction="labelFunction"   filterFunction="filterFunction"  width="120" rowCount="10"/>

  /**
    * 显示城市名
    */
   private function labelFunction(item:Object):String
   {
     return item.NAMEZH;
   }

/**
    * 过滤函数的应用
    */
   private  function filterFunction(text:String, item:Object):Boolean
   {
    if (StringUtil.trim(text) == "")
    {
     return true;
    }
     //均转换为大写
     text = text.toUpperCase();
    //简拼
    var kpinyin:String = item.KPINYIN;
    //全拼
    var npingyin:String = item.NPINGYIN;
    //英文名称
    var enName:String = item.NAMEEN;
    if((kpinyin != null && kpinyin.toUpperCase().indexOf(text) == 0)
    || (npingyin != null && npingyin.toUpperCase().indexOf(text) == 0)
    || (enName != null && enName.toUpperCase().indexOf(text) == 0))
    {
      return true;
    }
    return false;
   }

   

 

 

FilterComboBox 的设置如下：

 

package component
{
import flash.events.Event;
import flash.events.MouseEvent;

import mx.controls.ComboBox;
import mx.events.CollectionEvent;

/**
 * 可过滤拉列表框
 */
public class FilterComboBox extends ComboBox
{
 /**
  * 保存文本框文本
  */
 private var tempstr:String = "";
 
 /**
  * 过滤函数，返回true显示条目，返回false隐藏条目
  * @param text 文本
  * @param 条目对象
  * function filterFunction(text:String, item:Object):Boolean
  */
 public var filterFunction:Function;
 
 /**
  * 自动单条选中
  */
 public var autoSingleSelect:Boolean = true;
 
 /**
  * 构造
  */
 public function FilterComboBox()
 {
  super();
  //可编辑
  editable = true;
  //鼠标点击事件
  addEventListener(MouseEvent.CLICK, mouseClick_Handler);
 }
 
 /**
  * 覆盖更新显示函数
  */
 override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
 {
  //设置下拉按钮宽度为0，不显示
  setStyle("arrowButtonWidth", 0);
  
  super.updateDisplayList(unscaledWidth, unscaledHeight);
 }
 
 /**
  * 鼠标点击事件处理
  */
 private function mouseClick_Handler(event:MouseEvent):void
 {
  //展开列表
  open();
 }
 
 /**
  * 集合条目过滤函数
  */
 private function filterItem(item:Object):Boolean
 {
  if (filterFunction == null)
   return true;
   
  return filterFunction(text, item);
 }
 
 /**
  * 集合刷新处理函数
  */
 private function collChange_handler(event:CollectionEvent):void
 {
  //refresh类型
  if (event.kind == "refresh")
  {
   //只剩一个条目，则默认选中
   if (autoSingleSelect && collection.length == 1)
   {
    selectedIndex = 0;
    return;
   }
   //不选中条目
   dropdown.selectedIndex = -1;
   //滚动到最上部
   dropdown.verticalScrollPosition = 0;
   //必须主动设置文本，否则无法正常显示已经输入的文本
   text = tempstr;
   //显示下拉列表，会导致文本框文本被选中
   open();
   //不选中文本
   textInput.setSelection(tempstr.length, tempstr.length);
  }
 }
 
 /**
  * 过滤
  */
 private function filterCollection():void
 {
  if (collection == null)
   return;
  if (filterFunction != null)
  {
   //设置过滤函数
   collection.filterFunction = filterItem;
   //事件监听
   collection.addEventListener(CollectionEvent.COLLECTION_CHANGE, collChange_handler);
   //必须刷新视图
   tempstr = text;
   collection.refresh();
  }
  else
  {
   //显示下拉列表
   open();
  }
 }
 
 /**
  * 覆盖键盘up事件处理函数
  */
// override protected function keyUpHandler(event:KeyboardEvent):void
// {
//  super.keyUpHandler(event);
//  
//  filterCollection();
// }
 
 /**
  * 覆盖文本变换事件处理函数

  * 备注此处的覆盖方法必须使用override 修饰
  */
 override protected function textInput_changeHandler(event:Event):void{
  super.textInput_changeHandler(event);
  
  //过滤
  filterCollection();
 }
}
}

 

 

备注此代码，还有部分Bug需要修改：如在回退时可能出现的异常信息必须处理等。