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.