Filter/Search List box of Array Collection based on the user input text entered in the text area in Flex

Question

I have a MXList Box having arrayCollection and I have another textarea box.

My requirement is: When users enter the desired text in the text area, I need to fetch and show the matching records from the List like:

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

I have tried with various approaches:

<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;
             }

After checking these questions:

combobox which filters dataprovider based on user input and:

Flex - Search/Filter DataGrid by Text Input

I still don't understand how to make it work.

Answer 1

The filterFunction is a property of your ArrayCollection which should be set only once. Then.

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

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

The filterFunction must accept one argument that is supposed to be a collection item and return true if the item should be visible and false otherwise. The refresh method on data provider forces the filtering to happen.

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;
}

DISCLAMER : This all above is a guideline, not a complete solution, please figure details on your own.

Answer 2

<mx:TextInput id="textSearch" maxChars="30" width="230" height="20.004135" 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;
                    }
                }