Dynamically Searchable DataGrid Component (Flash AS 2.0)
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:
- place a textInput component onto the stage and give it an instance name of “search_txt”
- place a dataGrid component onto the stage and give it an instance name of “my_dg”
- 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;}

Tried this.. but didnĀ“t get it to work…
can u share the .fla?
thanks ; )
Hi,
It’s awesome, it’s working
thanks a lot man!!!!!!!!!!!!
exactly what i was looking for, nice work