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

Question

我有一个ComboBox,数据提供者是一个3个值的ArrayCollection:CA - 加州,纽约 - 纽约,德克萨斯州 - 德克萨斯州.使用默认行为,当我开始在ComboBox中输入时,它将尝试匹配字符串开头的值,因此如果我开始键入TX,它将调出TX - Texas.

我希望能够搜索字符串的任何部分,而不仅仅是从头开始,所以如果我输入"xas",它将过滤掉选择并仅显示TX - Texas.有一个非常有用的帖子在Adobe论坛在这里就如何通过改变其组合框提供的数据中的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

得到了你的问题的解决方案(因为我必须找出一个类似于谷歌搜索输入框的自定义组件).似乎正常的输入处理通过过滤数据提供者而进入错误的方式.然而,我没有根据需要深入检查意外行为的来源,以提供对导致问题的解释(可能解决方案的想法过快;.)).这里是:

<?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>

这个解决方案背后的想法是通过继承构建自定义Combobox并覆盖数据提供者的setter,以便通过任何textoperation将未过滤的数据提供者作为未更改的源,但让flex组合框以其通常的方式处理没有过滤器的集合附加到(通过任何输入都是源集合的过滤结果).这只是一次尝试但是起作用并且适用于我欣赏的快速;.)

快乐的编码