RSS

Dynamically Searchable DataGrid Component (Flash AS 2.0)

This entry was posted on Aug 21 2006

NOTES:

  • This code can be cleaned up a bit (and may be later on), but this is the basic system I use.
  • We’re working on proper hosting, so I’ll have the source files online for download soon.

SETUP THE STAGE:

  1. place a textInput component onto the stage and give it an instance name of “search_txt”
  2. place a dataGrid component onto the stage and give it an instance name of “my_dg”
  3. place a dynamic text field onto the stage and give it an instance name of “total_records_txt”

WRITE THE CODE:

First, we’ll setup the basic variables we need:

var search_for:String;
var myDP:Array = new Array();
var myNewDP:Array = new Array();

Populate data grid with some random

myDP.addItem({id:0, firstName:”David”, lastName:”Jackson”, url:”waxjelly.com”});
myDP.addItem({id:1, firstName:”Bryan”, lastName:”Maxwell”, url:”bawmlan.com”});
myDP.addItem({id:2, firstName:”Bryan”, lastName:”Maxface”, url:”waxjelly.com”}); … (the full list is available in the actual code at the end of this post)

Now we populate the dataGrid with our array

my_dg.dataProvider = myDP

And we throw in a nice little report field to tell us how many records there are at any given time

total_records_txt.text = my_dg.dataProvider.length;

Now we setup our listener object

// listen for key strokes
var myListener:Object = new Object();
myListener.onKeyUp = myListener.onKeyDown = function () {

This is a little ghetto, but the idea is that we’ll simply check to make sure our search box is selected, so we don’t unnecessarily run the function, since we’ll be running it a lot

if (Selection.getFocus() != “_level0.search_txt.label”) return;
if (Key.isDown(Key.BACKSPACE)) my_dg.dataProvider = myDP;

search_for = search_txt.text;
search_dp(search_for);

}

Key.addListener(myListener);

This is where the real work is done. We setup “search_dp” function which will get called on ever key stroke

function search_dp (search_for:String) {
trace(”searching for: ” + search_for);

very important: we reset the newDP to be empty, so that we don’t stack results. Comment the next line out and search for something to see what I mean

myNewDP = [];

First, we check if the last clicked key made the search box empty

if (search_for == “”) {

if it did, we simply repopulate the data grid with its original data

my_dg.dataProvider = myDP

if it did, we loop through the whole data provider

for (var i in myDP) {

loop through the current dp “Node”

for (var j in myDP[i]) {

we convert the element to a string (in case there’s a number being searched for) we convert the string and the search_for var to lower case then we look to see if the search_for string exists in the record entry

if (myDP[i][j].toString().toLowerCase().indexOf(search_for.toLowerCase()) != -1) {

myNewDP.push(myDP[i]);

if we found what we wanted we don’t need or want to keep searching the current record so we break out of this loop and go to the next record

break;

my_dg.dataProvider = myNewDP;
total_records_txt.text = my_dg.dataProvider.length;

Here’s the actual code:

var search_for:String;
var myNewDP:Array = new Array();
var myDP:Array = new Array();

myDP.addItem({id:0, firstName:”David”, lastName:”Jackson”, url:”waxjelly.com”});
myDP.addItem({id:1, firstName:”Bryan”, lastName:”Maxwell”, url:”bawmlan.com”});
myDP.addItem({id:2, firstName:”Bryan”, lastName:”Maxface”, url:”waxjelly.com”});
myDP.addItem({id:3, firstName:”Face”, lastName:”Maxwell”, url:”bawmlan.com”});
myDP.addItem({id:4, firstName:”David”, lastName:”Jackson”, url:”buzzgorilla.com”});
myDP.addItem({id:5, firstName:”James”, lastName:”Jackson”, url:”meshachjackson.com”});
myDP.addItem({id:6, firstName:”Joshua”, lastName:”Jackson”, url:”waxjelly.com”});
myDP.addItem({id:7, firstName:”Meshach”, lastName:”Jaxson”, url:”buzzgorilla.com”});
myDP.addItem({id:8, firstName:”Bryan”, lastName:”Mackswell”, url:”thatswhatimscreamin.com”});
myDP.addItem({id:9, firstName:”David”, lastName:”Jackson”, url:”waxjelly.com”});
myDP.addItem({id:10, firstName:”Meshach”, lastName:”Jackson”, url:”meshachjackson.com”});
myDP.addItem({id:11, firstName:”David”, lastName:”Jaxon”, url:”buzzgorilla.com”});
myDP.addItem({id:12, firstName:”Face”, lastName:”Maxface”, url:”thatswhatimscreamin.com”});
myDP.addItem({id:13, firstName:”James”, lastName:”Jackson”, url:”meshachjackson.com”});
myDP.addItem({id:14, firstName:”Meshach”, lastName:”Jackson”, url:”waxjelly.com”});
myDP.addItem({id:15, firstName:”David”, lastName:”Jackson”, url:”buzzgorilla.com”});
myDP.addItem({id:16, firstName:”Bryan”, lastName:”Facewell”, url:”meshachjackson.com”});
myDP.addItem({id:17, firstName:”Bryan”, lastName:”Maxface”, url:”bawmlan.com”});
myDP.addItem({id:18, firstName:”Face”, lastName:”Maxwell”, url:”waxjelly.com”});
myDP.addItem({id:19, firstName:”Max”, lastName:”Facewell”, url:”buzzgorilla.com”});

my_dg.dataProvider = myDP
total_records_txt.text = my_dg.dataProvider.length;

var myListener:Object = new Object();
myListener.onKeyUp = myListener.onKeyDown = function () {

if (Selection.getFocus() != “_level0.search_txt.label”) return;
if (Key.isDown(Key.BACKSPACE)) my_dg.dataProvider = myDP;
search_for = search_txt.text;
search_dp(search_for);

}

Key.addListener(myListener);

function search_dp (search_for:String) {

trace(”searching for: ” + search_for);
myNewDP = [];
if (search_for == “”) {

my_dg.dataProvider = myDP

}

for (var i in myDP) {

trace(”—– NODE# ” + i);
for (var j in myDP[i]) {

trace(”STRING: ” + myDP[i][j]);
if (myDP[i][j].toString().toLowerCase().indexOf(search_for.toLowerCase()) != -1) {

trace(”hit!”);
myNewDP.push(myDP[i]);
break;

} else {

trace(”miss”);

}

}

}

my_dg.dataProvider = myNewDP;
total_records_txt.text = my_dg.dataProvider.length;

}


3 Responses to “Dynamically Searchable DataGrid Component (Flash AS 2.0)”

  1. Tried this.. but didnĀ“t get it to work…
    can u share the .fla?

    thanks ; )


  2. Hi,

    It’s awesome, it’s working

    thanks a lot man!!!!!!!!!!!!


  3. exactly what i was looking for, nice work


Post a Comment