Apr 8
Having your text form input autosuggest values for you from your database couldn’t be easier in ColdFusion 9. There are really only two things you have to worry about: 1) the autosuggest value in your CFINPUT tag, and 2) the component function that performs the query for you, and then returns the result in an array.
Here is an example of a field that auto-suggests country names for you.
Here’s the CFINPUT:
<cfinput
type="text"
name="mailingCountry"
value="#mailingCountry#"
autosuggest="cfc:directoryName.componentName.suggestCountry({cfautosuggestvalue})"
="width: 275px; background-color: ##e2e2f2;"
/>
In the database is a table filled with country names. Here’s the function to access it:
<cffunction name="suggestCountry" returnType="Array" access="remote" output="false"> <cfargument name="suggestValue" required = "true"> <cfquery datasource="#request.thisDSN#" name="provideRecords" > SELECT DISTINCT countryName FROM lookup_country WHERE countryName LIKE <cfqueryparam value="#suggestValue#%" cfsqltype="cf_sql_varchar"> ORDER BY countryName </cfquery> <!--- Convert the query to an array. ---> <cfset var provideArray = ArrayNew(1)> <cfloop query="provideRecords"> <cfset arrayAppend(provideArray, countryName)> </cfloop> <cfreturn #provideArray#> </cffunction>
That’s it! ColdFusion 9 writes the JavaScript/AJAX that queries the server and writes the results back to the input field.
Apr 8, 2010 at 11:26 AM Thanks for the concise example. One question that comes to mind is how to control the frequency of calling the autosuggest component function. For example, does every new letter that's typed in the input field trigger a call to the CFC? Or can I configure it so that every 3rd character triggers the autosuggest? Just thinking of how to reduce the demand on the server while still being useful to the end user.
Apr 10, 2010 at 10:58 PM Hello, Steven! You have a nice blog there yourself; I'll try to keep an eye on it, it looks pretty useful.
The easy answer can be found in the CF9 documentation; they provide two attributes you would probably be interested in: autosuggestBindDelay (defaulting to 0.5 seconds) and autosuggestMinLength (defaulting to 1). If you want to slow down how often the autosuggest tags your server, these will be a big help.
I did a "view source" on one of the pages I use the feature on, and saw that it was pulling the code from /CFIDE/scripts/ajax/yui/autocomplete/autocomplete-min.js ; looking into the ColdFusion install, I see that CF9 uses the AutoComplete widget from the Yahoo UI Library. Here's a link to their documentation, which might come in handy if you really wanted to play hard with this:
http://developer.yahoo.com/yui/docs/YAHOO.widget.AutoComplete.html
Also, doing a quick Google, I found a blogger named Dan Wilson who wrote a nice intro to this as well:
http://www.nodans.com/index.cfm/2010/1/13/How-to-customize-the-ColdFusion-AutoSuggest
Thanks for stopping by!