Author: Steven Neiland
Published:

Note: I want to preface this article with the statement that I do not condone the use of <cfselect> and if you have the option to then you should never ever use it. Unfortunately for me I currently have to support a system that makes extensive use of the cfajax/cfui tags and sometimes I just don't have the time to rewrite everything.

Today for example I needed to add a feature to a cfform where the long list of values in a cfselect could be narrowed down after the form was loaded but before submitting it back to the server.

<!--- This drop down can display potentially hundreds of values --->
<cfselect
      name="user"
      id="user"
      display="username"
      editable="no"
      enabled="yes"
      multiple="no"
      required="yes"
      value="userId"
      bindonload="true"
      bind="cfc:components.users.getUsers()">

</cfselect>

The solution I came up with was to add an additional text field labelled filter before the select box that would be used to limit the values in the cfselect. All I needed to do was bind the cfselect to the additional text input so that the getUsers function would be passed the and have it refresh as I typed into the text box.

<!--- Filter the users drop down by this text --->
<cfinput type="text" name="filterusers" id="filterusers">
                                                
<!--- This drop down can display potentially hundreds of
values filtered by the value in the filterusers text box--->

<cfselect
      name="user"
      id="user"
      display="username"
      editable="no"
      enabled="yes"
      multiple="no"
      required="yes"
      value="userId"
      bindonload="true"
      bind="cfc:components.users.getUsers({filterusers})">

</cfselect>

Problem: cfselect does not refresh automatically

This was where I had a small problem. While the cfselect is bound to the cfinput it does not refresh automatically as you type into the text field. Instead you have to explicitly tell it to refresh which is a problem as the live docs only details how to refresh a cftree or a cfgrid.

With JQuery this would be a simple matter but the cfajax tags hide things away from us so I had to do some searching. Eventually I found this article on cfsearching.blogspot.com detailing exactly how to accomplish this.

All I needed to do was to add a keyup event listener to the cfinput to execute this line of javascript.

<script language="javascript">
      ColdFusion.bindHandlerCache['yourElementID'].call();
</script>

Final Code

The result is this simple block of code.

<!--- Filter the users drop down by this text --->
<cfinput type="text" name="filterusers" id="filterusers" onkeyup="refreshSelect();">
                                                
<!--- This drop down can display potentially hundreds of
values filtered by the value in the filterusers text box--->

<cfselect
      name="user"
      id="user"
      display="username"
      editable="no"
      enabled="yes"
      multiple="no"
      required="yes"
      value="userId"
      bindonload="true"
      bind="cfc:components.users.getUsers({filterusers})">

</cfselect>

<script language="javascript">
      refreshSelect = function(){
            ColdFusion.bindHandlerCache['user'].call();
      }
</script>

In conclusion don't use cfselect if you can, but if you have no choice and need it to refresh on a bound element change this solution should have you covered.

What Do You Think?

Reader Comments

Doug's Gravatar
Doug
Thursday, September 4, 2014 at 7:58:55 PM EDT

I'm a newbie, as I'm sure you'll figure out in a moment. What should be used in place of a bound cfselect?

Steven Neiland's Gravatar
Steven Neiland
Thursday, September 4, 2014 at 9:17:21 PM EDT

In a word JQuery.

It might take you a little while to figure out how to do it with a standard select and jquery but you will be a better developer for learning how. More importantly you will have the potential to do a lot more complex things down the future that cfselect does not allow you to.

Post a Comment

Comment Etiquette:

  • Please keep comments on-topic.
  • Please do not post unrelated questions or large chunks of code.
  • Please do not engage in flaming/abusive behaviour.
  • Comments that contain or appear to be advertisments, will not be published.
  • Comments that appear to be created for the purpose of linkbuilding to commercial sites will be removed.

We are all adults here so play nice.

*
*



Archives Blog Listing

Tag Listing

Learn CF In A Week

Treehouse

 
Fork me on GitHub