Copy link to clipboard
Copied
I have built a crud flash form. In the form I have a cfselect that is populated by several hundred teachers. I'm looking for an easy way to select a teacher. If you click on the dropdown and type "s" it takes you to the first record beginning with "s". What I would like to do is make it so that you can start typing a name and it filters out the data so that is the only data avaialbe in the dropdown.
Anybody know if this is possible or know of a better solution?
Thanks!
Copy link to clipboard
Copied
Yup, it's possible and better yet, easy! [insert all kinds of disclaimers here]
You can bind CFSELECT to a .cfc component which returns the options you want.
And you can give the .cfc an argument, which is the value of a search box.
Example:
test.cfm
<cfform name="form1">
<cfinput type="text" name="searchterm">
<cfselect name="myoption" bind="cfc:queryoptions.search({form1:searchterm})"
bindonload="true" value="mytext"></cfselect>
</cfform>
queryoptions.cfc
<cfcomponent >
<cffunction name="search" returnformat="json" access="remote" >
<cfargument name="searchterm">
<cfset q = queryNew("myvalue,mytext","varchar,varchar")>
<cfloop from="65" to="90" index="c">
<cfset queryAddRow(q)>
<cfset querySetCell(q,"myvalue",c)>
<cfset querySetCell(q,"mytext",lcase(repeatstring(chr(c),5)))>
</cfloop>
<cfquery name="qoq" dbtype="query" >
SELECT myvalue,mytext FROM q
<cfif trim(arguments.searchterm) neq "">
WHERE lower(mytext) LIKE '#lcase(arguments.searchterm)#%'
</cfif>
</cfquery>
<cfreturn qoq>
</cffunction>
</cfcomponent>
There you go. A working example.
The .cfc is unnecessarily long, because I first created query data from scratch. 25 rows, values from AAAAA, BBBBB to ZZZZZ. Then I emulate the "real" query (you're going to have) by doing a QueryOfQuery of the querydata (representing the data in your database).
In real life, you just need one query. Make sure your search is case insensitive (as I did in the example).
Hope this helps with ColdFusion bindings. They rule.
Edit: the select does not re-populate before the search field unfocuses. This would do the trick: onkeyup="this.blur();this.focus();" but it's really an awful haxx, and is not guaranteed to work correctly at all. There should be a better way to do this, but I haven't checked if and how BINDs can be activated "remotely" from javascript.
--
-Fernis - fernis.net - ColdFusion Developer For Hire
Copy link to clipboard
Copied
Fernis,
Thanks for the code. It does exactly what I'm looking for it to do. Cool stuff! However, when I use your code on test pages it works great, but when I insert it into my flash form, the dropdown never populates.
I copied/pasted the searchbox and cfselect from the test page and inserted it directly into my flash form. The form name is exactly the same.
Any Ideas?
Thanks
Copy link to clipboard
Copied
Unfortunately Binding is not suppored for CFSELECT in Flash forms.
I don't use flash forms myself. but http://www.asfusion.com/blog/entry/how-to-populate-a-cfselect-with-flash might help you out, if you must use flash.
Also, you might need http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WSc3ff6d0ea77859461172e0811cbec22c24-7c4b.html
It does get complicated.
-Fernis