根据在Flex中文本区域输入的用户输入文本过滤/搜索Array Collection的列表框

Posted 2023-02-18

【中文标题】根据在Flex中文本区域输入的用户输入文本过滤/搜索Array Collection的列表框

【英文标题】：Filter/Search List box of Array Collection based on the user input text entered in the text area in Flex

【发布时间】：2018-08-14 08:58:18

【问题描述】：

我有一个具有 arrayCollection 的 MXList 框，我还有另一个 textarea 框。

我的要求是：当用户在文本区域输入所需的文本时，我需要从 List 中获取并显示匹配的记录，例如：

___________
|____Ka___|    Text area
__________
|Kanrna   |List Box : ArrayCollection
|Kam      |
|Kao      |
|kaddsd   |So it looks something like this 
|_________|

我尝试了各种方法：

<mx:List id="availableProfileList"
    dataProvider="campaignProxy.campaignWizardVo.currentProfiles""/>

<mx:TextArea id="textSearch" textInput="applyFilter()"/>

protected function applyFilter():void
    campaignProxy.campaignWizardVo.currentProfiles.filterFunction = matchingFunction(campaignProxy.campaignWizardVo.currentProfiles, textSearch.text);
    //Alert.show(textSearch.text)
    //availableProfileList.findString(textSearch.text);
    //availableProfileList.setFocus();


public function matchingFunction(availableProfileList:List, text:String):Vector.<int> 
             var results:Vector.<int> = new Vector.<int>;
             var item:String;
             var entered:String = text.toLowerCase();
           var itemIdx:int;
           Alert.show("before for");
           for(var idx:int = 0; idx < availableProfileList.dataProvider.length; idx++) 
           item = availableProfileList.dataProvider.getItemAt(idx) as String;
                 item = item.toLowerCase();
                 itemIdx = item.indexOf(entered);
                 if(item.indexOf(entered) > -1) 
                     results.push(idx);
                 
           
           return results;
             

检查这些问题后：

combobox which filters dataprovider based on user input 和：

Flex - Search/Filter DataGrid by Text Input

我仍然不明白如何使它工作。

【问题讨论】：

为什么使用 filterFunction 的奇怪方式（无论如何你都在用错误的方式做）？您可以直接从 applyFilter 更改 dataProvider。

我尝试将该逻辑放在应用过滤器中，但我仍然没有得到它。如果有任何提示，对我实施会有帮助

如果这是一个桌面应用程序，那么 Flextras 的一个很棒的 AutoCompleteComboBox 组件就是这样做的：flextras.com/?event=ProductHome&productID=19

请问，您是如何使用 Flex 的？我自己在一个我们已经运行了 8 年的大型项目中使用它，但我想知道人们是否还在新的应用程序上使用它

【参考方案1】：

<mx:TextInput id="textSearch" maxChars="30"   change="applyFilter()" enabled = "true"
/>  


protected function applyFilter():void
                    (availableProfileList.dataProvider as ArrayCollection).filterFunction = filterFunc;
                    (availableProfileList.dataProvider as ArrayCollection).refresh();
                

public function filterFunc(item:Object):Boolean
                    var searchedStr:String = textSearch.text;
                    var profile:ProfileVO = item as ProfileVO;
                    if (searchedStr == null) 
                        return (availableProfileList.dataProvider as ArrayCollection).refresh();
                    
                    else 
                        return profile.profileName.toLowerCase().indexOf(searchedStr.toLowerCase()) == 0;
                    
                

【讨论】：

availableProfileList.dataProvider as ArrayCollection 可能会引发类转换异常。最好通过as 进行转换并检查结果是否不是null。

【参考方案2】：

filterFunction 是您的 ArrayCollection 的一个属性，只能设置一次。那么。

<mx:List id="availableProfileList"
    dataProvider="campaignProxy.campaignWizardVo.currentProfiles""/>

<mx:TextArea id="textSearch" textInput="campaignProxy.campaignWizardVo.currentProfiles.refresh();"/>

filterFunction 必须接受一个应该是集合项的参数，如果该项应该可见则返回 true，否则返回 false .数据提供者的 refresh 方法强制进行过滤。

function filterList(item:Object):Boolean

    // Returns true if item label (or title, or name, I don't remember)
    // starts with the text in the input area, case insensitive.
    return item.label.toLowerCase.indexOf(textSearch.text.toLowerCase()) == 0;

免责声明：以上内容仅供参考，并非完整的解决方案，请自行计算详细信息。

【讨论】：

感谢 Organis 的投入，我做了一些细微的改动

另一个查询是如何根据列表框上的按键过滤元素。因为列表框中没有keppress事件所以任何指针

@AvinashTS keyDown 事件完美存在，继承自 InteractiveObject：help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/…

我正在使用列表调用以下函数，但我只能捕获一个字符我想知道的第一件事是是否可以根据用户输入至少 3 个字符来过滤列表.私有函数 checkKeyDown(e:KeyboardEvent):void Alert.show("key"+String.fromCharCode(e.charCode));

@AvinashTS 除非为您保留这些字符，否则您需要手动保留最后 3 个并调用 refresh() 以便它根据保留的字符进行过滤。跨度>