Using Regular Expressions to Filter Arraycollections.

Consider we have a requirement like filtering the DataGrid based on some inputs.  Like consider I have a DataGrid and have a DataGridColumn which contains Places list (Bangalore,Delhi,Tirupathi,Chennai…ets).Now that I want to filter this DataGrid upon Places DataGridColumn, based on some TextIput entry.so how am I gonna do this ??.

Here I will show two cases of filtering using the ArrayCollection with RegularExpressions.

I have a ArrayCollection With the Data Like below.

<mx:ArrayCollection id=”prods”>
<mx:Object Artist=”Pavement object killing” Price=”11.99″
Album=”Slanted and Enchanted” />
<mx:Object Artist=”kavement regular expression”
Album=”Brighten the Corners” Price=”11.99″ />
<mx:Object Artist=”Pavement hrule radio” Price=”11.99″
Album=”Slanted and Enchanted” />
<mx:Object Artist=”kavement”
Album=”Brighten the Corners” Price=”11.99″ />
<mx:Object Artist=”Pavement button checkbox” Price=”11.99″
Album=”Slanted and Enchanted” />
<mx:Object Artist=”kavement may be this is”
Album=”Brighten the Corners” Price=”11.99″ />
</mx:ArrayCollection>

Now I want to filter the Artist Column. And  I want 2 cases for filtering or conditions for filtering.

Case 1: The entered text should occur any where in the column data.

For this my Regular Expression would be like below.

new RegExp(sinput.text,”i”)

Here sinput is the id of my TextInput.

Case 2: The column data should start with the entered text.

For this my Regular Expression would be like below.

var strPatt:String=”^”+sinput.text+””;
var newRegEx:RegExp=new RegExp(strPatt,”i”);

Here sinput is the id of my TextInput.

Explore RegularExpression to learn more about them or how to write one.And the best source would the Help from the Flex Builder. And Explore about writing Filter Functions For Arraycollection.

Now Enjoy this Demo Application.

Comment For queries or Code. Enoy the Post. 🙂

Updated:

DownLoad source code

using setFocus() method to bring focus to a Textinput control.

To bring focus to a TextInput control in flex we can use a method called setFocus().

ex: textinputreference.setFocus();

This will bring the focus to the TextInput of id “textinputreference”.

check the below example.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”absolute” creationComplete=”fnInit()”>

<mx:Script>
<![CDATA[
private function fnInit():void
{
txtInp.setFocus();
}
]]>
</mx:Script>
<mx:TextInput id=”txtInp” x=”381″ y=”206″/>
</mx:Application>

Updated ::

Read data in to ArrayCollection from PHP backend.[using HttpService]

First the HttpService looks like this:

<mx:HTTPService id=”productlist” url=”product_list.php” useProxy=”false” showBusyCursor=”true” result=”readProducts(event)”/>

Now define the handler on result :

import mx.collections.ArrayCollection;

[Bindable]
private var prods:ArrayCollection = new ArrayCollection();

private function readProducts(event:ResultEvent):void
{
prods=(event.result.product.items);
}

and my PHP[product_list.php] page will output data like below:[just echo of each line]

<product>

<items>

<name>pen</name>

</items>

</product>