Skip to main content
March 17, 2010
Question

Filtering cfselect data

  • March 17, 2010
  • 1 reply
  • 992 views

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!

This topic has been closed for replies.

1 reply

Fernis
Inspiring
March 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

March 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

Fernis
Inspiring
March 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