Getting back to the accounts demo - the eagle-eyed might have noticed I added a "search" box above the view. As you can see below, as you type in a string the content of the DataGrid/view change to show only the entries matching that string.

It's not really searching, as such. I guess it's more like filtering than searching.

How Does It Do That?

As with lots of things Flex it is relatively simple to filter a data grid. The grid's content comes from its "dataProvider". In this case that's the XML returned from Domino to represent each document in the database. The XML looks like this:

<documents>
        <document unid="CB609D90B0103EF886257623007EBFC5">
                <date>09/01/2009</date>
                <description>Nuka Cola</description>
                <direction>incoming</direction>
                <category>Sponge</category>
                <amount>1025.00</amount>
        </document>
        <document unid="90479C82FDDFB71186257624000A7CBE">
                <date>09/01/2009</date>
                <description>Sexy nightwear</description>
                <direction>outgoing</direction>
                <category>Clothes</category>
                <amount>3333.00</amount>
        </document>
        ....
</documents>

What we need to do is look at the XML and produce a subset of it, which contains the string being filtered on. Not as difficult as you might think. You don't even have to do any looping! It can all be done with E4X.

If you're going to get in to Flex then you really need to get yourself familiar with both how it handles XML and how to use E4X.

To find matching rows from the above XML format we can use the following ActionScript:

var token:String = fldFilter.text.toUpperCase();

var hits:XMLList = xmlDocuments.(
        child('amount').toUpperCase().indexOf(token) === 0 || 
        child('description').toUpperCase().indexOf(token) != -1
);

if (hits.length() > 0) {
        viewExpenses.dataProvider = hits;
}

What this does is take the string the user entered (in to a TextInput element with id "fldFilter") and looks inside the xmlDocuments object (which represents the XML for the grid) for matches. To find matches it uses the E4X syntax to compare the values of certain child elements. In this case we're look for document with a description that contains the string anywhere in it or where the amount matches the input exactly.

Once we have our slimmed-down XML we can apply it as the dataProvider of the grid, whose ID is "viewExpenses".

Simple, no?

I've missed out the key-down handling logic, which sets a timer to know when you're done typing etc but you get the point? What I'm wanting to show is how easy it is to use E4X to subset the XML in a DataGrid/view.

Tomorrow I'll show how to take it one step further and add a little wow factor at the same time.

Proper Searching?

As noted, this isn't really searching the database and the filter box isn't meant to replace any search box which might end up appearing at the very top right of the page.

In the accounts app the view just happens to show all documents in one go, so the filtering can be expected to behave a little like searching. If you're grid doesn't show all backend documents then you might want to think about how you convey this to the user. Alternatively you might want the filter box to send a request back to the server to do a search/filter there and fetch back a completely new set of XML. Again, not hard to do.

Related Reading

• The search box itself is based on the "fancy search field" I talked about a few weeks back.
• The key-press-handling timer code for performing the filtering as you type is borrowed from this org chart demo.