AutoFilter Search in Flex
Posted by flexrays on August 9, 2007
It might be really easy to search a list if you implement this feature.
This is how it is done
I am assuming that you know how to implement the below mentioned function
private var filteredListArray : Array;
private function filterList(event:Event = null) : void
{
var txtLength:Number = txtInput.length;;
var txtEntered:String = txtInput.text;
filteredListArray = new Array();
if(txtInput.text == “”)
{
listId.dataProvider = dataProvider;
return;
}
else
{
for(var i : int = 0 ; i < dataProvider.length; i++)
{
if(dataProvider[i].toString().substring(0, txtLength).toLowerCase() == txtEntered.toLowerCase())
{
filteredListArray.push(dataProvider[i]);
}
listId.dataProvider = filteredListArray;
}
}
}
<mx:TextInput id=”txtInput” change=”filterList(event)”/>
<mx:List id=”listId” dataProvider=”{dataProvider}”/>
TextInput calls filterList(event) every time user inputs something in the text input box
filterList(event) method carries out all the necessary functionality
The catch is the way we assign the proper data provider to the List component
I will provide the working example in near future. Till that time please try and make complete use of the bits and pieces of codes. 
Rostislav Siryk said
Rashmi, thank you for pointing me to the trouble with Firefox Search Plugins for Flash, Flex etc. I’ve solved the problem and now you can use it. Sorry for discrepancy, I’ve never knew WordPress can squeeze my Javascripts so rudely
Ajay Kemparaj said
Rashmi,
There is a small glitch in the code.
private var filteredListArray : Array();
it should be
private var filteredListArray : Array;
flexrays said
Thanks for pointing it out Ajay.. I have corrected the code.
Arindam Mojumder said
Hello Rashmi,
listId.dataProvider = dataProvider;
where is the variable dataProvider?
Showing error in FLex.
Arindam Mojumder said
Hello Rashmi,
Is dataProvider is a ArrayCollection or any Array type object?
Mousumi Bhowmick said
thank u. very helpfull example.
Prayaga said
Thank U!!
Very Useful…..
Looking at how to highlight the contents of entered text in the list….
Santosh Bhoyar, Hyderabad said
Here I would like to post the sample example for autofiltering DataGrid. Hope you ppl will enjoy it.
import mx.collections.ArrayCollection;
[Bindable]
private var customersArray:ArrayCollection = new ArrayCollection([
{FirstName:"Barbara", LastName:"Jennings"},
{FirstName:"John", LastName:"Gag"},
{FirstName:"Joe", LastName:"Smith"},
{FirstName:"Brian", LastName:"Sheridan"},
{FirstName:"Chris", LastName:"Sheridan"},
{FirstName:"Jose", LastName:"Reyes"},
{FirstName:"Barbara", LastName:"Walters"},
{FirstName:"Bruce", LastName:"Smith"},
{FirstName:"Barry", LastName:"Sanders"},
{FirstName:"Joe", LastName:"Montana"},
{FirstName:"George", LastName:"Bush"},
{FirstName:"Jim", LastName:"Carey"},
{FirstName:"Roy", LastName:"Holliday"},
{FirstName:"Ryan", LastName:"Braun"},
{FirstName:"Jimmy", LastName:"Kimble"},
{FirstName:"Steve", LastName:"Weyrick"}
]);
private function filterContent():void{
if(txtFilter.text.length == 0){
customersArray.filterFunction=null;
}
else{
customersArray.filterFunction=filterColumn;
}
customersArray.refresh();
}
private function filterColumn(item:Object):Boolean{
var content:String = txtFilter.text.toLowerCase();
var key:String = item.FirstName.toLowerCase();
if(key.indexOf(content)!=-1){
return true
}
else{
return false
}
}