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

Making it Case Insensitive - 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



If you were to type "laptop" instead of "Laptop" you would not see any results. This is because our function cares about the case of the letters. To fix this, we can simply change our filter function so that the comparison is case insensitive. Here is an updated portion of the filter function: 

      // if the content of the search box 

      // is a sub string of this item

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

          return true;



Notice the addition of the 'toLowerCase' methods being call on tmpString and search.text.  This converts both strings to lowercase before testing to see if one is a substring of the other.

Sorting Our ArrayCollection

For the remaining portions of this article we talk about sorting our list in ascending and descending order. Much like the filterFunction, the ArrayCollection object provides an object for sorting. Although a little bit more complicated, much of the work is done for us thanks to encapsulation. To get our sorting algorithm in place we need to create two objects, the Sort and the SortField. Here is the code:

 // version 1

 var sort:Sort = new Sort(); 

 sort.fields = [new SortField("label", true)];

The first line is a general Sort object which our ArrayCollection will reference. The sort object has a property called fields which references an array of the SortField Object. This sounds more complicated than it really is. Here is another way to write the same code that is easier to read:

// version 2

// create a new sort object

var sort:Sort = new Sort(); 

// Create a sort field.

// The sort field is a label name in the 

// ArrayCollection.  The sorting will be

// performed on this field.  The second argument

// determines if the sort is case insensitive

var sortArray:Array = new Array();

var sortField = new SortField("label",true);

// Add the sort field to the array


// assign sort fields to the sort object

sort.fields = sortArray;

// assign the sort object to our array collection

computersCollection.sort = sort;

This alternative method is drawn out a bit more and does not take advantage of the short form of creating Arrays. Nonetheless, both ways are valid. For the remainder of the article we will go with version 1 of the sorting code. We need to place this code in our application.

Also note that you will have to import the sort classes, as in:

import mx.collections.Sort;

import mx.collections.SortField;

>>> 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: