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

发布时间：2020-12-15 01:44:18 所属栏目：百科来源：网络整理

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

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

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

如果用户选择一个值,然后尝试输入新文本,则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}"/>

解决方法

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

<?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组合框以其通常的方式处理没有过滤器的集合附加到(通过任何输入都是源集合的过滤结果).这只是一次尝试但是起作用并且适用于我欣赏的快速;.)

快乐的编码

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!