Filtering an XMLListCollection using the filterFunction property and regular expressions

Here is another handy little tip that you see all over the web, how do I filter a data grid (or other list-based control) based on a user’s input? Or more specificially, how to I limit the items that show in a list based on what a user types.

Since I already created a simple XML document of Countries/States, I thought I’d create a basic form that lets a user type in the first few characters of a state name and have the DataGrid filter its results. You’ll also notice that I had to do some not-so-tricky E4X filtering to extract only the American state names.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function filterFunc(item:Object):Boolean {
                return item.text().match(new RegExp("^" + stateName.text, "i"));
            }
        ]]>
    </mx:Script>

    <mx:XML id="dp" source="countries_states.xml" format="e4x" />

    <mx:XMLListCollection id="xmlListColl" source="{dp.country.(@name == 'United States of America').state}" filterFunction="filterFunc" />

    <mx:VBox>
        <mx:HBox width="100%">
            <mx:Label text="Name:" />
            <mx:TextInput id="stateName" width="100%" change="xmlListColl.refresh()" />
        </mx:HBox>

        <mx:DataGrid id="dataGrid" dataProvider="{xmlListColl}">
            <mx:columns>
                <mx:DataGridColumn id="codeCol" dataField="@code" headerText="Abbr:" width="60" />
                <mx:DataGridColumn id="nameCol" dataField="*" headerText="Name:" width="240" />
            </mx:columns>
        </mx:DataGrid>
        <mx:Label text="Filtered: Showing {xmlListColl.length} record(s)" visible="{stateName.text.length > 0}" />
    </mx:VBox>

</mx:Application>

View source is enabled in the following example.

Tagged as: filterFunc