`
luhantu
  • 浏览: 202935 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

带搜索的comboBox组件

阅读更多

Flex自带的comboBox也可以支持搜索,但是它是从第一位严格匹配的,如果我想做一个这样条件的搜索:只要lable中有输入的字符,那么就定位到匹配的第一个项。自定义itemMatchingFunction并不会允许客户输入一个字符串,而是当客户输入第一个字符串就立刻匹配并定位,显然这不是我们想要的。

唉,还是上代码吧。

App:

<?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" minWidth="955" minHeight="600" xmlns:view="com.view.*">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.collections.ArrayList;
			
			import spark.components.ComboBox;
			import spark.events.IndexChangeEvent;
			[Bindable]
			public var complexDP:ArrayCollection = new ArrayCollection(
				[    {ingredient:"Salmon", category:"Meat"}, 
					{ingredient:"Potato", category:"Starch"}, 
					{ingredient:"Cucumber", category:"Vegetable"}, 
					{ingredient:"Steak", category:"Meat"}, 
					{ingredient:"Rice", category:"Starch"}, 
					{ingredient:"Cumin", category:"Spice"}
				]                
			);
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<view:ComboBoxSearch 
		id="bcc"
		dataProvider="{complexDP}" 
		width="150" 
		selectedIndex="0" 
		labelField="ingredient"/>  
</s:Application>

 ComboBoxSearch:

package com.view
{
	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.utils.Timer;
	
	import flashx.textLayout.operations.CutOperation;
	import flashx.textLayout.operations.DeleteTextOperation;
	import flashx.textLayout.operations.FlowOperation;
	import flashx.textLayout.operations.InsertTextOperation;
	
	import mx.core.mx_internal;
	
	import org.osmf.events.TimeEvent;
	
	import spark.components.ComboBox;
	import spark.events.DropDownEvent;
	import spark.events.TextOperationEvent;
	
	public class ComboBoxSearch extends ComboBox
	{
		private var timer:Timer;
		private var tempEvent:TextOperationEvent;
		public function ComboBoxSearch()
		{
			super();
			this.addEventListener(Event.ADDED_TO_STAGE,onAddToStageHandler);
			this.addEventListener(Event.REMOVED_FROM_STAGE,onRemoveToStageHandler);
		}
		
		private function onAddToStageHandler(event:Event):void
		{
			timer = new Timer(300,1);
			timer.addEventListener(TimerEvent.TIMER,onTimerHandler);
		}
		
		private function onRemoveToStageHandler(event:Event):void
		{
			if(timer.running)
			{
				timer.stop();
			}
			timer.removeEventListener(TimerEvent.TIMER,onTimerHandler);
			timer = null;
		}
		
		override protected function textInput_changeHandler(event:TextOperationEvent):void
		{
			tempEvent = event;
			if(timer.running)
			{
				timer.stop();
			}
			timer.reset();
			timer.start();
		}
		
		private function onTimerHandler(event1:TimerEvent):void
		{
			var operation:FlowOperation = tempEvent.operation;
			if (operation is DeleteTextOperation || operation is CutOperation)
			{
				super.mx_internal::changeHighlightedSelection(CUSTOM_SELECTED_ITEM);
				processInputField();
			}
			else
			{
				if (openOnInput)
				{
					if (!isDropDownOpen)
					{
						openDropDown();
						addEventListener(DropDownEvent.OPEN, editingOpenHandler);
						return;
					}   
				}
				processInputField();
			}
		}
		
		private function editingOpenHandler(event:DropDownEvent):void
		{
			removeEventListener(DropDownEvent.OPEN, editingOpenHandler);
			processInputField();
		}
		
		private function processInputField():void
		{
			var matchingItems:Vector.<int>;
			if (!dataProvider || dataProvider.length <= 0)
				return;
			if (textInput.text != "")
			{
				if (itemMatchingFunction != null)
					matchingItems = itemMatchingFunction(this, textInput.text);
				else
					matchingItems = findMatchingItems(textInput.text);
				
				if (matchingItems.length > 0)
				{
					super.mx_internal::changeHighlightedSelection(matchingItems[0], true);
					
					var typedLength:int = textInput.text.length;
					var item:Object = dataProvider ? dataProvider.getItemAt(matchingItems[0]) : undefined;
					if (item)
					{
						var itemString:String = itemToLabel(item);
						textInput.selectAll();
						textInput.insertText(itemString);
						textInput.selectRange(typedLength, itemString.length);
					}
				}
				else
				{
					super.mx_internal::changeHighlightedSelection(CUSTOM_SELECTED_ITEM);
				}
			}
			else
			{
				super.mx_internal::changeHighlightedSelection(NO_SELECTION);  
			}
		}
		
		private function findMatchingItems(input:String):Vector.<int>
		{
			var startIndex:int;
			var stopIndex:int;
			var retVal:int;  
			var retVector:Vector.<int> = new Vector.<int>;
			retVal = findStringLoop(input, 0, dataProvider.length); 
			if (retVal != -1)
				retVector.push(retVal);
			return retVector;
		}
		
		private function findStringLoop(str:String, startIndex:int, stopIndex:int):Number
		{
			for (startIndex; startIndex != stopIndex; startIndex++)
			{
				var itmStr:String = itemToLabel(dataProvider.getItemAt(startIndex));
				if(itmStr)
				{
					if(itmStr.toLowerCase().indexOf(str.toLowerCase()) > -1)
					{
						return startIndex;
					}
				}
			}
			return 0;
		}
	}
}

 当然,如果你想优化搜索的方法,那么就你只要修改findStringLoop方法即可。

 

 

0
1
分享到:
评论

相关推荐

    ComboBOX 组件自制的C#.NET

    ComboBOX组件在C#.NET开发中是一个常用的控件,它结合了下拉列表框和文本框的功能,允许用户从预定义的选项中选择一个条目,或者手动输入新的值。在Windows Forms(WinForm)应用中,我们经常使用System.Windows....

    Ext combobox 下拉多选框带搜索功能

    总的来说,这个定制的Ext ComboBox组件结合了多选和搜索功能,提高了用户在大量选项中的交互效率。理解并实现这样的功能对于开发复杂的Web应用程序是非常有价值的,尤其是在需要用户快速准确选择多项的场景下。通过...

    ComBoBox组件重写

    1. **功能增强**:开发者可能希望增加组件的功能,例如`PowerComboBoxCSharp.rar`可能包含一个增强版的C#实现,提供更强大的搜索、过滤或排序功能。 2. **多列显示**:`MultiColumnCombo_src.zip`和`...

    combobox 下拉多选框带搜索功能

    JavaScript是Web开发中用于创建动态交互效果的主要语言,而这个文件很可能包含了一个自定义的ComboBox组件,支持多选和搜索功能。 首先,让我们来理解多选功能。在传统的ComboBox中,通常只能选择一个选项。但在...

    ComboBox拼音匹配组件

    在日常的用户界面设计中,ComboBox通常用于提供一个下拉列表供用户选择,而这个组件则增加了对中文拼音的智能搜索,使得用户可以通过输入拼音首字母快速找到目标选项,极大地提升了用户体验。 在描述中提到,该组件...

    Ext带图标Combobox

    而"Ext带图标Combobox"(Ext IconCombobox)是Ext JS中的一个特色组件,它是Combobox(下拉框)与图标相结合的一种扩展形式,为用户提供了更加直观且美观的交互体验。 **1. Ext Combobox基础** 首先,我们需要了解...

    QML-自定义ComboBox

    在本文中,我们将深入探讨如何在Qt环境中使用QML实现一个自定义的ComboBox组件。ComboBox在用户界面设计中是一个常见的控件,它提供了一个下拉列表供用户选择,通常用于有限的选项展示。通过自定义ComboBox,我们...

    easyui中combobox后台交互实例

    EasyUI的Combobox组件结合后台交互,能够轻松实现动态加载数据、搜索筛选等功能,极大地提高了用户体验。通过理解其基本结构、事件机制以及JSON数据格式,开发者可以灵活地定制符合需求的下拉列表组件。在实际项目中...

    AS2 combox 组件

    AS2 ComboBox组件是一种在Flash AS2.0环境中开发的交互式用户界面元素,它结合了下拉列表(dropdown list)和文本输入框的功能。在网页或应用程序中,这种组件常用于提供用户一个可搜索或选择的选项集合,同时允许...

    带查询功能的ComboBox控件

    对于Web应用,比如基于JavaScript的库(如jQuery UI, Select2)或前端框架(如React, Vue)都有对应的ComboBox组件。在这些库中,通常有一个回调函数用于处理查询逻辑,例如在React中,可以监听`onChange`事件,...

    combobox Ext之扩展组件多选下拉框

    本篇将重点讲解ExtJS中的一个扩展组件——多选下拉框,即“combobox”。 在ExtJS中,ComboBox是一个基本的输入组件,它结合了文本输入框和下拉列表的功能。默认情况下,ComboBox只允许用户选择一个选项。但是,通过...

    带模糊查询的ComboBox

    在Windows Forms开发中,`ComboBox`控件是一个常用的组件,用于提供下拉列表让用户选择。然而,标准的`ComboBox`并不直接支持模糊查询功能,即输入部分文本后就能显示出匹配的选项。为了实现这一功能,开发者通常...

    winform combobox多选扩展

    现有的combobox只有单选功能,通过重画combobox构造多选combobox;

    #ComboBox自动补全小技巧(模糊查找)

    在.NET框架下,ComboBox控件是Windows Forms应用程序中常见的组件,用于展示下拉列表供用户选择。本教程将深入探讨如何在C#环境下,利用VS2005为ComboBox添加自动补全或模糊查找功能,这在实际开发中非常实用,能够...

    ComboBox

    在Windows编程、Web开发、Android应用开发以及各种桌面应用程序中,ComboBox都是一个不可或缺的组件。 在“ComboBox_API_download.htm”文档中,很可能是对ComboBox的API(应用程序编程接口)进行了详细介绍。API...

    带选择项CheckBox的下拉列表ComboBox控件

    本话题聚焦于一个特定的UI组件,即“带选择项CheckBox的下拉列表ComboBox控件”。这个控件结合了两种常见的界面元素:CheckBox和ComboBox,提供了一种更灵活的选择方式,特别是在需要用户从多个选项中进行多选时。 ...

Global site tag (gtag.js) - Google Analytics