根据用户输入过滤数据提供者的自定义 Flex ComboBox

Question

我有一个 ComboBox，数据提供者是一个包含 3 个值的 ArrayCollection：CA - 加利福尼亚州、纽约州 - 纽约州、德克萨斯州 - 德克萨斯州。当我开始在 ComboBox 中输入时，默认行为会尝试匹配字符串开头的值，所以如果我开始输入 TX，它将调出 TX - Texas。

我希望能够搜索字符串的任何部分，而不仅仅是从头开始，所以如果我输入“xas”，它将过滤掉选择，只显示 TX - Texas。 Adobe 论坛 here 中有一篇非常有用的帖子，介绍了如何通过更改为 ComboBox 提供数据的 ArrayCollection 上的过滤器功能来做到这一点，我已经对其进行了调整，但我遇到了一个小问题。

如果用户选择一个值，然后尝试输入新文本，则在 ComboBox 中键入的第一个字母不会显示。

1) 在 ComboBox 中选择值 CA - California
2) 突出显示文本并在键盘上按“n”
3) 您希望看到填充有“n”的文本框，但文本框仍然为空

什么可能导致此问题？只有当您已经选择了一个值时才会发生这种情况。如果你从一个空白的 ComboBox 开始，它会按预期工作。

<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.events.FlexEvent;

        import spark.events.TextOperationEvent;

        [Bindable]
        public var arrC:ArrayCollection = new ArrayCollection([{label:'CA - California'},{label:'NY - New York'},{label:'TX - Texas'}]);

        private function changeHandler(e:*):void
        {
            if (arrC.filterFunction != doFilter)
                arrC.filterFunction = doFilter;
            arrC.refresh();
        }

        private function doFilter(item:Object):Boolean
        {
            if(String(item.label).toLowerCase().indexOf(cb.textInput.text.slice(0 ,cb.textInput.selectionAnchorPosition).toLowerCase())>-1)             
            {
                return true;
            }
            return false;
        }                       

        protected function application1_creationCompleteHandler(event:FlexEvent):void
        {
            cb.textInput.addEventListener(TextOperationEvent.CHANGE,changeHandler );
        }

    ]]>
</fx:Script>

<s:ComboBox id="cb" dataProvider="{arrC}"/>

Answer 1

为您的问题找到了解决方案（因为我必须设计一个行为类似于 google 搜索输入框的自定义组件）。似乎正常的输入处理通过过滤数据提供者进入错误的方式。但是，我没有深入研究意外行为的来源，以提供对导致问题的可靠解释（可能的解决方案的想法来得太快了;.)）。这里是：

<?xml version="1.0" encoding="utf-8"?>
<s:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"
        skinClass="CGoogleComboSkin">
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.collections.IList;

        import spark.events.TextOperationEvent;

        private var unfilteredDataProvider : IList;
        override public function set dataProvider(value:IList):void {
            super.dataProvider = value;

            unfilteredDataProvider = value;
        }

        override protected function textInput_changeHandler(
                event:TextOperationEvent):void {
            super.textInput_changeHandler(event);

            if (unfilteredDataProvider is ArrayCollection) {
                ArrayCollection(unfilteredDataProvider).filterFunction = filterMatches;
                ArrayCollection(unfilteredDataProvider).refresh();

                super.dataProvider = new ArrayCollection(unfilteredDataProvider.toArray()); 
            }
        }

        protected function filterMatches(item:Object):Boolean {
            if (item is String) {
                if(String(item).toLowerCase().indexOf(
                    textInput.text.slice(0,
                        textInput.selectionAnchorPosition).toLowerCase())>-1)
                    return true;
            }
            else if (labelField && labelField!= "") {
                if(item.hasOwnProperty(labelField) && 
                        String(item[labelField]).toLowerCase().indexOf(
                        textInput.text.slice(0,
                        textInput.selectionAnchorPosition).toLowerCase())>-1)
                    return true;
            }

            return false;
        }
    ]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>

此解决方案背后的想法是通过继承和覆盖 dataprovider 的 setter 来构造自定义 Combobox，以使未过滤的 dataprovider 作为任何文本操作未更改的源，但让 flex 组合框以通常的方式处理集合其中没有附加过滤器（任何输入都已经是源集合过滤的结果）。这只是一次尝试，但很有效，而且应用速度和我欣赏的一样快；。）

快乐编码