Thursday, January 13, 2011

Search through XML database using AS3: Part 6

In this tutorial we will learn how to make our search function ignore case sensitivity and how to keep all the cells white if no search criteria is set.

To make a regular expression case insensitive, we can add the "i" flag. Usually it would look something like this: /criteria/i, but because we create our RegExp dynamically (using variables), we can add any flags we want as the second parameter when defining a new RegExp object.

So we can update our regexp definitions in the search() function to the following:

pattern_firstname = new RegExp(search_firstname.text,"i");
pattern_secondname = new RegExp(search_secondname.text,"i");
pattern_job = new RegExp(search_job.text,"i");

Now, you might have noticed that if you don't enter any criteria and hit the search function, the datagrid has all the rows highlighted. If you don't want that to happen, you can set a check in the for loop that sets the row color to white if there is no criteria (all textfields are empty and the ComboBox has value of "Any").

for (var n:int = 0; n<allUserbase.length; n++)
{
currentUserbase.push(allUserbase[n]);
if ((pattern_firstname.test(allUserbase[n].firstname) || search_firstname.text=="") && (pattern_secondname.test(allUserbase[n].secondname) || search_secondname.text=="") && (allUserbase[n].sex == search_sex.selectedItem.data || search_sex.selectedItem.data=="Any") && (allUserbase[n].age == search_age.text || search_age.text=="") && (pattern_job.test(allUserbase[n].job) || search_job.text==""))
{
currentUserbase[currentUserbase.length - 1].rowcolor = "red";
}
else
{
currentUserbase[currentUserbase.length - 1].rowcolor = "white";
}

if (search_firstname.text == "" && search_secondname.text == "" && search_sex.selectedItem.data == "Any" && search_age.text == "" && search_job.text == "")
{
currentUserbase[currentUserbase.length - 1].rowcolor = "white";
}

}

Here's the full code:

import fl.data.DataProvider;
import fl.controls.dataGridClasses.DataGridColumn;

var col_fname:DataGridColumn = new DataGridColumn("First");
myGrid.addColumn(col_fname);

var col_lname:DataGridColumn = new DataGridColumn("Last");
myGrid.addColumn(col_lname);

var col_age:DataGridColumn = new DataGridColumn("Age");
myGrid.addColumn(col_age);
col_age.sortOptions = Array.NUMERIC;
col_age.width = 35;

var col_sex:DataGridColumn = new DataGridColumn("Sex");
myGrid.addColumn(col_sex);
col_sex.width = 50;

var col_job:DataGridColumn = new DataGridColumn("Job");
myGrid.addColumn(col_job);

var allUserbase:Array = [];// contains all users like in xml
var currentUserbase:Array = [];// contains users that need to be displayed

var _loader:URLLoader = new URLLoader();
var _data:XML = new XML();

_loader.addEventListener(Event.COMPLETE, readXML);
_loader.load(new URLRequest("userbase.xml"));

function readXML(event:Event):void
{
_data = new XML(event.target.data);
for each (var usr in _data.user)
{
allUserbase.push({id: usr.@id, firstname: usr.@firstname, secondname: usr.@secondname, sex: usr.@sex, age: usr.@age, job: usr.@job, rowcolor:"white"});
}
currentUserbase = allUserbase.concat();
updateList();
}

function updateList():void
{
myGrid.dataProvider = new DataProvider ();

for (var i:int = 0; i<currentUserbase.length; i++)
{
myGrid.addItem({First: currentUserbase[i].firstname, Last: currentUserbase[i].secondname, Age: currentUserbase[i].age, Sex: currentUserbase[i].sex, Job: currentUserbase[i].job, RowColor: currentUserbase[i].rowcolor});
}
}

// Search:

search_firstname.text = "";
search_firstname.restrict = "A-Za-z";
search_secondname.text = "";
search_secondname.restrict = "A-Za-z";
search_sex.dataProvider = new DataProvider([{label:"Any",data:"Any"},{label:"Male",data:"Male"},{label:"Female",data:"Female"}]);
search_age.text = "";
search_age.restrict = "0-9";
search_job.text = "";
search_job.restrict = "A-Za-z ";

var pattern_firstname:RegExp;
var pattern_secondname:RegExp;
var pattern_job:RegExp;

bt_search.addEventListener(MouseEvent.CLICK, search);

function search(MouseEvent):void
{
currentUserbase = [];

pattern_firstname = new RegExp(search_firstname.text,"i");
pattern_secondname = new RegExp(search_secondname.text,"i");
pattern_job = new RegExp(search_job.text,"i");

for (var n:int = 0; n<allUserbase.length; n++)
{
currentUserbase.push(allUserbase[n]);
if ((pattern_firstname.test(allUserbase[n].firstname) || search_firstname.text=="") && (pattern_secondname.test(allUserbase[n].secondname) || search_secondname.text=="") && (allUserbase[n].sex == search_sex.selectedItem.data || search_sex.selectedItem.data=="Any") && (allUserbase[n].age == search_age.text || search_age.text=="") && (pattern_job.test(allUserbase[n].job) || search_job.text==""))
{
currentUserbase[currentUserbase.length - 1].rowcolor = "red";
}
else
{
currentUserbase[currentUserbase.length - 1].rowcolor = "white";
}

if (search_firstname.text == "" && search_secondname.text == "" && search_sex.selectedItem.data == "Any" && search_age.text == "" && search_job.text == "")
{
currentUserbase[currentUserbase.length - 1].rowcolor = "white";
}

}
updateList();
}

myGrid.setStyle("cellRenderer", colorCellRenderer);

And the results should look like this:


Thanks for reading!

Related:

Search through XML database using AS3: Part 1
Search through XML database using AS3: Part 2
Search through XML database using AS3: Part 3
Search through XML database using AS3: Part 4
Search through XML database using AS3: Part 5

12 comments:

Mitchell said...

This series is really very helpful. I hope you can keep expanding the possibilities for AS3 database usage programming examples. Thanks!

yasir said...

Great work by Author

Anonymous said...

How would i use this action script and also add a link to a file within the same folder if i clicked a cell on the datagrid?

Ankit Patni said...

hi,

this is wat i was really looking for. I really appreciate if you can show how to add image with the same from xml and get same image with search able content.

Thank you, :)

Anonymous said...

hi : where is source code? thanks : my email adress:demirci.erhan@windowslive.com mysite:erhandemirci.blogspot.com

Da said...

I, too would like to have the code, I can put the xml and stuff together but am having trouble getting search parsed. can you send me .fla and .as if you have a moment? I would be most grateful

Da said...

email: climbapps@gmail.com

thanks again

Kirill Poletaev said...

Uploaded the files here.

ThaiSon Vo said...

How can I do Datagrid search when i save data to sharedObject
thanks

Kirill Poletaev said...

I don't understand your question.

ThaiSon Vo said...

var myProduct:SharedObject = SharedObject.getLocal("myProduct","/");

if (myProduct.data.created == undefined)
{
myProduct.data.IdNum = new Array();
myProduct.data.Product = new Array();
myProduct.data.Quantity = new Array();
myProduct.data.Colour = new Array();
myProduct.data.Unit = new Array();
myProduct.data.Price = new Array();
myProduct.data._Date = new Array();

myProduct.data.created = 1;
myProduct.flush();

}
else
{
populateDataGrid();

}

function populateDataGrid()
{
for (var i = 0; i <= myProduct.data.Product.length - 1; i++)
{
myGrid.addItem({STT:myProduct.data.IdNum[i], SANPHAM:myProduct.data.Product[i], SOLUONG:myProduct.data.Quantity[i], MAUSAC:myProduct.data.Colour[i], DONVI:myProduct.data.Unit[i], THANHTIEN:myProduct.data.Price[i], NGAYTHANG:myProduct.data._Date[i]});
}
}
/*import com.yahoo.astra.fl.controls.AutoComplete;
autoComplete.dataProvider = new DataProvider(myProduct.data.Product);
autoComplete.autoFillEnabled = true;
function airportFilterFunction(element:*, index:int = 0, arr:Array = null):Boolean
{
var txt:String = autoComplete.text.toLowerCase();

var willWork:Boolean = (element.items.toLowerCase().substring(0,txt.length) == txt);

return willWork;
}

autoComplete.addEventListener(Event.CLOSE, function ():void {
trace("Yo");
trace(autoComplete.selectedLabel);
var arr:Array = myProduct.data.Product
var filteredArr:Array = arr.filter(airportFilterFunction);
myGrid.dataProvider = new DataProvider(filteredArr);
});*/
with the code above
how can i do the search data through the sharedObject and display the result in the datagrid??
thanks

DB said...

I'm trying to adapt your code to my project by making everything dynamic (able to be added and removed from the stage on demand).

Maybe that could be Part 7? :D

Post a Comment