Using the to ArrayCollection's filterFunction

source : here
and here

Problem Summary
Finding a way to to filter data in a DataGrid regardless of the data in question case.

 Solution Summary

Use ArrayCollection's filterFunction and compare the data's string with a string you provide using RegEx to disregard the strings case (upper, lower or whatever)

Explanation

   1. First create an array.
   2. Pass that array to an ArrayCollection.
   3. Pass ArrayCollection  as DataProvider for a DataGrid

   4. Create a textInput
   5. Create a function that will filter data from the textInput text, return type Boolean

   6. Now call the filterFunction method of the ArrayCollection class, pass the filterFunction to created
   7. create an Event listener for knowing when to filter (eg. textinput, click)

   8. create a reset button for clearing the filter.
   9. That's essentially it. See example and code to see the full scope and that should explain it self


<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init();" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            import mx.collections.*;
           
           
            private var collectionArray:Array;
            [Bindable]
            private var collectionData:ArrayCollection;
           
            private var selectedName:String = "first";
            import mx.controls.Alert;
            import mx.events.ItemClickEvent;
           
            private function init():void
            {
                collectionArray = [{first: 'Dave', last: 'Matthews'},
                                {first: 'Dave', last: 'Chappelle'},
                                    {first: 'Amy', last: 'Grant'},
                                    {first: 'Bilbo', last: 'Baggins'},
                                    {first: 'Jessica', last: 'Tandy'},
                                    {first: 'Jessica', last: 'Simpson'},
                                    {first: 'Paris', last: 'Hilton'}];
                collectionData = new ArrayCollection(collectionArray);
            }
           
             public function filter():void {
                
                
                   collectionData.filterFunction = filterFirst;
                   collectionData.refresh();
                    
            }
           
             public function filterReset():void {
                
                
                   collectionData.filterFunction = null;
                   collectionData.refresh();
                    
            }
           
            private function filterFirst(item:Object):Boolean
            {
                return item[selectedName].match(new RegExp(searchField.text, 'i'))
            }
           
            private function search():void
            {
                if(searchField.text !='')
                {
                    filter()
                }
                else
                {
                    filterReset()
                }
            }
           
           
   
            private function handleCard(event:ItemClickEvent):void {
               
                   selectedName = event.currentTarget.selectedValue as String;
                    
              
            }
           
            private function eraseText(event:MouseEvent):void
            {
                searchField.text ='';
            }
           
        ]]>

    </mx:Script>
    <mx:DataGrid id="nameGrid" dataProvider="{collectionData}"  height="210"/>
    <mx:VBox y="{nameGrid.height + 10}">
        <mx:TextInput tabEnabled="true" tabIndex="1" text="Search First Name" id="searchField" toolTip="Filter First Name"  change="search()" rollOver="eraseText(event)" />
    <mx:HBox>
        <mx:RadioButtonGroup id="nameGroup"  itemClick="handleCard(event)"/>

        <mx:RadioButton tabEnabled="true" tabIndex="2" label="first" selected="true" groupName="nameGroup"/>
        <mx:RadioButton tabEnabled="true" tabIndex="3" label="last" groupName="nameGroup" />
        <mx:Button tabEnabled="true" tabIndex="4" click="searchField.text='';search()"   label="Reset" />
    </mx:HBox>
    </mx:VBox>
   
</mx:Application>