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方法即可。
相关推荐
ComboBOX组件在C#.NET开发中是一个常用的控件,它结合了下拉列表框和文本框的功能,允许用户从预定义的选项中选择一个条目,或者手动输入新的值。在Windows Forms(WinForm)应用中,我们经常使用System.Windows....
总的来说,这个定制的Ext ComboBox组件结合了多选和搜索功能,提高了用户在大量选项中的交互效率。理解并实现这样的功能对于开发复杂的Web应用程序是非常有价值的,尤其是在需要用户快速准确选择多项的场景下。通过...
1. **功能增强**:开发者可能希望增加组件的功能,例如`PowerComboBoxCSharp.rar`可能包含一个增强版的C#实现,提供更强大的搜索、过滤或排序功能。 2. **多列显示**:`MultiColumnCombo_src.zip`和`...
JavaScript是Web开发中用于创建动态交互效果的主要语言,而这个文件很可能包含了一个自定义的ComboBox组件,支持多选和搜索功能。 首先,让我们来理解多选功能。在传统的ComboBox中,通常只能选择一个选项。但在...
在日常的用户界面设计中,ComboBox通常用于提供一个下拉列表供用户选择,而这个组件则增加了对中文拼音的智能搜索,使得用户可以通过输入拼音首字母快速找到目标选项,极大地提升了用户体验。 在描述中提到,该组件...
而"Ext带图标Combobox"(Ext IconCombobox)是Ext JS中的一个特色组件,它是Combobox(下拉框)与图标相结合的一种扩展形式,为用户提供了更加直观且美观的交互体验。 **1. Ext Combobox基础** 首先,我们需要了解...
在本文中,我们将深入探讨如何在Qt环境中使用QML实现一个自定义的ComboBox组件。ComboBox在用户界面设计中是一个常见的控件,它提供了一个下拉列表供用户选择,通常用于有限的选项展示。通过自定义ComboBox,我们...
在Windows Forms开发中,`ComboBox`控件是一个常用的组件,用于提供下拉列表让用户选择。然而,标准的`ComboBox`并不直接支持模糊查询功能,即输入部分文本后就能显示出匹配的选项。为了实现这一功能,开发者通常...
EasyUI的Combobox组件结合后台交互,能够轻松实现动态加载数据、搜索筛选等功能,极大地提高了用户体验。通过理解其基本结构、事件机制以及JSON数据格式,开发者可以灵活地定制符合需求的下拉列表组件。在实际项目中...
AS2 ComboBox组件是一种在Flash AS2.0环境中开发的交互式用户界面元素,它结合了下拉列表(dropdown list)和文本输入框的功能。在网页或应用程序中,这种组件常用于提供用户一个可搜索或选择的选项集合,同时允许...
对于Web应用,比如基于JavaScript的库(如jQuery UI, Select2)或前端框架(如React, Vue)都有对应的ComboBox组件。在这些库中,通常有一个回调函数用于处理查询逻辑,例如在React中,可以监听`onChange`事件,...
现有的combobox只有单选功能,通过重画combobox构造多选combobox;
本篇将重点讲解ExtJS中的一个扩展组件——多选下拉框,即“combobox”。 在ExtJS中,ComboBox是一个基本的输入组件,它结合了文本输入框和下拉列表的功能。默认情况下,ComboBox只允许用户选择一个选项。但是,通过...
在Windows编程、Web开发、Android应用开发以及各种桌面应用程序中,ComboBox都是一个不可或缺的组件。 在“ComboBox_API_download.htm”文档中,很可能是对ComboBox的API(应用程序编程接口)进行了详细介绍。API...
在.NET框架下,ComboBox控件是Windows Forms应用程序中常见的组件,用于展示下拉列表供用户选择。本教程将深入探讨如何在C#环境下,利用VS2005为ComboBox添加自动补全或模糊查找功能,这在实际开发中非常实用,能够...
本话题聚焦于一个特定的UI组件,即“带选择项CheckBox的下拉列表ComboBox控件”。这个控件结合了两种常见的界面元素:CheckBox和ComboBox,提供了一种更灵活的选择方式,特别是在需要用户从多个选项中进行多选时。 ...