Filtering cfselect data

Report · Mar 17, 2010

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!

Report · Mar 18, 2010

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

Report · Mar 18, 2010

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

Report · Mar 18, 2010

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

Adobe Community

Filtering cfselect data