Add Comment
Simple Auto Suggest Tutorial
ColdFusion Tutorial #7
This tutorial shows just how simple an Auto Suggest field is with ColdFusion 8
demo.cfm
So this is really simple, as there is really only one line of code that you need to worry about. Line 4, the CFINPUT.The things you need here are the following attributes
autosuggest="cfc:autosuggest.findPark({cfautosuggestvalue})"
This provides the cfc that will return the results, the cfautosuggestvalue is the information entered into the field.
autosuggestminlength="1"
This defines how many characters need to be typed in before attempting to auto suggest a value, in this example we use one.
maxresultsdisplayed="10"
This defined how many suggestions to display when found.
There is also one more of interest, although not used in this example
autosuggestbinddelay="2"
This would say don't fetch data until 2 seconds after a key is pressed, this is probably too long and the minimum you can use is 1. Even 1 might be too long of a delay, the trick is the default value is 0.5 even though you can specify less than 1, if you don't include this paramater then the delay will be half a second.
autosuggest.cfc
The CFC is very simple also. All you need to do is have a function that receives one string paramater (line 5) (the text typed in) and returns a list of results (line 19).You can include the typed in text in a where statement (line 14).
Use valueList (line 19) to convert the required column from the query into a list and that's it, it doesn't get much easier than that!
Demo
See this code running!
Download
Download this code as a zip!
Comments
The Autosuggest is a great idea. But commas in the data mess it up. I have a list of names: last name <comma> first name. What I get from the Autosuggest is a list of all the last names and a list of all the first names. What if you had a list of city <comma> state or park <comma> country or a list of part names? Commas are pretty common in data. I saw how to set the delimiter for static data, but you can't change the delimiter for data coming from an internal cfquery or a cfc.Any ideas?
Scott Emery @ Saturday 03 May 2008 - 11:31:51 AM
You can use CF8's autosuggest with data that has embedded commas, but you do it by returning an array rather that a list.
Assuming the data is pulled from a query just loop over the query and build up the array.
Bruce Kolofske @ Thursday 26 Feb 2009 - 12:42:41 AM
Click button to add a comment
Author
Dale Fraser