Home arrow XML arrow Page 2 - Flex Array Collection Sort and Filtering

Implementing the Filter - XML

It's not unusual to need to write an application that can filter and sort a list of items based on user input. Maybe your e-commerce shop offers a variety of notebooks from different companies, and you want visitors to be able to sort or filter your selection. Combining Flex with ActionScript allows you to create such an application with a minimum amount of hassle (and code), as you'll see in this article.

  1. Flex Array Collection Sort and Filtering
  2. Implementing the Filter
  3. Making it Case Insensitive
  4. Adding the Sort Button
By: Keith Lee
Rating: starstarstarstarstar / 16
September 03, 2009

print this article



The process we will use to filter the list is quite simple.  Flex and ActionScript have made this job easy for us by providing the filterFunction attribute of the ArrayCollection.  This attribute points the ArrayCollection to a function that we will write.

The function determines which of the elements of the collection will be displayed and which elements will not be displayed. The function is called once for every item in the list. The function must has a Boolean return type which translates TRUE to display the object and FALSE to NOT display this object.

Here is what our filter function will look like: 

public function filter(item:Object):Boolean{


       var tmpString:String = new String(item);


      // If there is nothing is the search box

      if (search.text==""){

           return true;



      // if the contents of the search box 

      // is a sub string of this item

      if (tmpString.indexOf(search.text)!=-1){

          return true;



      return false;


Let's break this down. The item is passed to our function by the ArrayCollection as an Object. The first thing that our function does is create a new String object out of the item being tested for display. We do this because we want to make use of the some the string methods (indexOf).

Next, we check to see if our search TextInput is blank. If it is, then we should not filter anything. In this case, we simply return TRUE for all elements. If the search TextInput DOES have text in it, we would have to continue execution of this function in order to see if the contents of the search TextArea is a substring of the item being tested for display. If the search text turns out to be a substring of the item, we would return TRUE, thereby causing the item to be displayed.

At the start of the application, all items are display; however, if we were to type into our TextInput, nothing would change in our list. This is because we need to tell the the ArrayCollection to refresh itself when a character has been pressed in the search box. To do this, we add the following event to the search input: 

     <mx:TextInput id="search" width="100%"  keyUp="computersCollection.refresh()"/>

Refreshing the ArrayCollection effectively calls the filterFunction again -- once per item.  

Here is a look at the completed application: 

In the example image above example, notice that only items with the word Laptop are displayed.

>>> More XML Articles          >>> More By Keith Lee

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Google Docs and Xpath Data Functions
- Flex Array Collection Sort and Filtering
- The Flex Tree Control
- Flex List Controls
- Working with Flex and Datagrids
- How to Set Up Podcasting and Vodcasting
- Creating an RSS Reader Application
- Building an RSS File
- An Introduction to XUL Part 6
- An Introduction to XUL Part 5
- An Introduction to XUL Part 4
- An Introduction to XUL Part 3
- An Introduction to XUL Part 2
- An Introduction to XUL Part 1
- XML Matters: Practical XML Data Design and M...

Developer Shed Affiliates


Dev Shed Tutorial Topics: