Filtering a list as you type in a ColFusion Flash Form
43 comments Posted by: Nahuel ForondaThis is an example to show an input text that filters a list when the user types some characters. The image below shows the filtered list with only the names that match what is in the input text.
Code:
<cfsavecontent variable="changeForInput">
if(_global.arrMembers == undefined) _global.arrMembers = data.dataProvider.slice(0);
var arrMembers = _global.arrMembers;
var arrDisplay:Array = [];
var fortext = forInput.text.toLowerCase();
for(var i = 0; i < arrMembers.length; i++)
{
if(arrMembers[i].label.substr(0,fortext.length).toLowerCase() == fortext)
{
arrDisplay.push(arrMembers[i]);
}
}
data.dataProvider = arrDisplay;
</cfsavecontent>
<cfform name="myForm" format="flash" width="400" height="300">
<cfformgroup type="panel" label="Search our Members">
<cfinput type="text" name="forInput" onchange="#changeForInput#" label="Search for:">
<cfselect name="data" query="memberList" size = "10" value="id" display="name"></cfselect>
</cfformgroup>
</cfform>
View the example
Download the source
43 Comments so far
Write yourshttp://www.asfusion.com/blog/index.cfm?mode=entry&entry=DB477742-3048-525A-B2D68A2476E4DC69
Thanks so much for this code. I was able to adapt the filter to my application but don't know how to reset/unset/clear the array variable. When the page is reloaded it has the last value selected so I don't get the full list.
Thanks
Susan
Thanks! I was trying to do the same thing but this code is far more elegant. Oddly, though I have not been able to get this code to work on a non-Flash CF form, specifically: format="xml"? I want to do this (and your grid example too!) using format="xml", but I'm just not sure how to go about it. Although I'm quite new to CF, Flash & Actionscript it doesn't seem as if there is anything in the actionscript that would prevent it from working in a format="xml" situation... What am I missing?
Thanks again!
Randy
Ahh... now that I've checked the CF documentation... allow me to rephrase that question... ;~)
The javascript that I put together to accomplish almost the same thing inside a flash form is not nearly as clean or elegant... if you were to try to do this in Javascript, how would you do it?
Thanks!
Randy
For instance, if I wanted to search names that contain the letter "D", and not necessarily start with the letter "D", that would be awesome.
That has been answered in the comments of http://www.asfusion.com/blog/entry/filtering-a-cfgrid-as-you-type--revisited-
change this line:
if(item[selected].substr(0,fortext.length).toLowerCase() == fortext)
to:
if(arrMembers[i][selected].toLowerCase().indexOf(fortext) != -1)
Can you tell me if I can CFOUTPUT from the results of this filter?
Any help would be greatly appreciated.
Thanks again.
(BTW. I found the answer to the cfoutput question above using bind)
Thanks for any help.
For instance, if I wanted to search numbers that start with "2", that would be awesome. I see the other link does this on the age field but it doesn't work on the integer field on my data. As soon as I type a number in the "Filter By" field all the data disappears.
I thought I read something telling someone how to eliminate numbers. I can't find it again.
try changing this line
if(arrMembers[i].label.substr(0,fortext.length).toLowerCase() == fortext)
with this:
if(arrMembers[i].label.toString().substr(0,fortext.length).toLowerCase() == fortext)
Worked like a charm. You're the greatest !
This is my first attempt on flash forms so may sound crazy. I am trying to build a search interface and options to search are first or last name. I do not want to refresh to screen to display results what would you suggest I can use? Any help is appreciated.
I have one filtering on names and would like to do another on assets. Completely different/separate databases.
Thanks for any help.
I got both filters to show on two different pages of the tabnavigator.
I duplicated the cfsavecontent and renamed to “astFilter”
Replaced data.dataProvider, Item.data and the 2nd grid to “astGrid”
(read somewhere that “data” was the name of the grid)
it’s now astGrid.dataProvider and Item.astGrid
Changed cfinput name from “forInput”
to “forAstInput”
And cfselect name from “column”
to “astcolumn”
They both show up BUT the duplicate doesn’t work.
When something is entered into the Filter by: field all the data disappears.
Thanks for any help.
var selected = column.selectedItem.data;
Changed to
var selected = astcolumn.selectedItem.data;
The data doesn't disappear any more but it doesn't filter either.
“… I had to rename forInput to forInput1 and forInput2, rename column to column1 and column 2, and then rename the arrays to arr1 and arr2 …” posted by michael white.
I tried to rename the forInput to forInput1 and use it in the onChange but this made my cfform not show at all. How do I rename the forInput and the arr?
thanks for any help
if(_global.arr1Members == undefined) _global.arr1Members = invgrid.dataProvider.slice(0);
var arr1Members = _global.arr1Members;
var arr1Display:Array = [];
var fortext1 = forMyInput.text.toLowerCase();
var selected = invcolumn.selectedItem.invgrid;
for(var i = 0; i < arr1Members.length; i++)
{if(arr1Members[i][selected].toString().substr(0,fortext1.length).toLowerCase() == fortext1)
{arr1Display.push(arr1Members[i]); } }
invgrid.dataProvider = arr1Display;
</cfsavecontent>
I've tried to change everything.
cfinput name="forMyInput" onChange="#invFilter#"
cfselect name="invcolumn" onChange="forMyInput.text=''"
cfgrid name="invgrid"
Can you please tell me why this filter will not work. I get the data but when I type into the field all the data disappears.
If you are willing to download all the data, then you can use a filter like:
http://www.asfusion.com/blog/entry/filtering-a-cfgrid-as-you-type
Otherwise, you can use remoting:
http://www.asfusion.com/blog/entry/populating-a-cfgrid-with-flash-remoting
Thanks for the select filter it worked like magic, first I tried it with loading select values at the time form loads and it works fine, but to improve performance and cache I had to change the way form loads, now after loading the flash form in browser then I am populating the select values and after that the filter stops working, I don't know what have I done wrong, could you please help me.
Now I am loading form like this:
Cform on load event calls this function:loadPub();
function loadPub()
{
var pubThis = this;
var pubService:Object = getRemoteService(function (results){ pubThis.finishedPublication(results); });
pubService.getPublicationList();
}
Then following function to populate.
function finishedPublication(results)
{
selectPublication.removeAll();
selectPublication.dataProvider = results;
selectPublication.addItemAt(0,'Select a Publication',-1);
selectPublication.selectedIndex=0;
}
Could you please enlight me to sort this thing.
Thanks
I am still waiting for some suggestion to my previous reply, If you need more clarification, please let me know?
Thanks
Use
selectPublication.dataProvider = results.items;
Hope that helps
Thanks again,
Your problem must be somewhere else, most likely a case issue (AS is case sensitive, so check that your columns match exactly your query/db), because there is NO difference between a query manually constructed and a query from an actual database.
what I want to do is insert data into a DB without having to refresh the page, because what good are these form is we still have to deal with the POST/GET issues. I would like my web apps to behave like desktop apps. If anyone knows how to accomplish this please share it with me. thanks!
I would recommend that you read the Real Estate sample application article. It explains how to add/delete/update data without refreshing the page:
http://www.macromedia.com/devnet/coldfusion/articles/flashforms_pt2.html
var arrMembers = _global.arrMembers;) being created? Because I copied it exactly as is from the source code you guys provided and change the query name to reflect the code and nothing works, I also updated to CF 7.01(latest update). I would really appreciate it if you could help me out with this. Thanks
This is only once you have filtered the grid. If you do not filter the grid then it will work. So at what point does this rename the grid? How can you keep the same grid name?
I update the grid via a cfinput that is bound to the selectedIndex of the grid and then have a button with onclick to:
gridname.dataProvider.editField(gridname.selectedIndex, 'COLUMN', textname.text);
This works great and the cfgridupdate works great even when you filter the grid, but once you filter the grid, you can not run the cfgridupdate.
I hope this makes sense.
First off, huge fan of asfusion.com. I have learned so much from reading these posts and trying them at work. Great job keep it up!
Ok, to business. I am using the "sort as you type" technique with a cfgrid to display quite a bit of information. I am tring to add something like this underneath the cfgrid:
Displaying 1 of: ___
Where the ___ is a numeric value containing the current item count in the cfgrid. So if the grid starts with 200 items it is decreased as I type for the filter.
I have been trying in the actionFilter code to do something like:
countField = arrMember.length;
But this only yields the lenght once and does not change as I type in data for the filter.
Thoughts?
Respectfully,
- Matt R.
with ="{gridname.dataProvider.length}"
i'm using a query to get data with additional option for "ALL" value, but after removing filter it reverts to first record (slice(0)).
--
statements i've tried that do not work, or return null list,
if(arrMembers[i].label.toString().substr(0,fortext.length).toLowerCase() == "")
{ arrDisplay.push(arrMembers[arrMembers.length]);}
----
created a var to capture arrmembers.length and assign it to slice count
any guidance is greatly appreciated. thanks
if(arrMembers[i][selected].toLowerCase().indexOf(fortext) != -1)to filter on any part of the word and not just the beginning.... and my flash movie wont load when coldfusion renders the page. is anyone else having a similar issue? i'm using mx7when I change the code line from
if(item[selected].substr(0,fortext.length).toLowerCase() == fortext)to:
if(arrMembers[i][selected].toLowerCase().indexOf(fortext) != -1)it will not load the movie for me. I'm using mx7 and i'm trying to filter on any portion of the record and not just the beginning.
<cfsavecontent variable="changeForInput">
if(_global.arrMembers == undefined) _global.arrMembers = data.dataProvider.slice(0);
var arrMembers = _global.arrMembers;
var arrDisplay:Array = [];
var fortext = forInput.text.toLowerCase();
for(var i = 0; i < arrMembers.length; i++)
{
if(arrMembers[i][selected].toLowerCase().indexOf(fortext) != -1)
{
arrDisplay.push(arrMembers[i]);
}
}
data.dataProvider = arrDisplay;
</cfsavecontent>
from
f(arrMembers[i].label.toString().substr(0,fortext.length).toLowerCase() == fortext)to
if(arrMembers[i].label.toLowerCase().indexOf(fortext) != -1)from
if(arrMembers[i].label.toString().substr(0,fortext.length).toLowerCase() == fortext)to
if(arrMembers[i].label.toLowerCase().indexOf(fortext) != -1)Have you come across where the filter behaves like an auto-suggest (i.e. same box). I found code for form=html but not form=flash (of course, the html doesn't work for flash).
Open to text boxes or cfselects.
Thanks for any help!
if i dont filter the data then the update works fine
Please tell me whats wrong?
onchange="#changeForInput#"