ColdFusion 8 and 9 have an autosuggest functionality that just couldn’t be simpler.
If you want to have an autosuggest input on the screen, you can do it with a single line of code:
That snippet will place an autosuggest box on the screen and allow a choice of english, spanish or french. Snazzy yeah?
If you want, you can bind the autosuggest to a javascript function, or directly to a CFC, making data retrieval and formatting very simple.
You can also make more complex examples, take a look at the ColdFusion 9 Documentation for Autosuggest for some ideas.
All this is possible because ColdFusion used the extensive YUI library under the hood. The control used by the ColdFusion Autosuggest is the YUI AutoComplete widget.
Let’s say you wanted to do something that the YUI AutoComplete offers, but isn’t in the ColdFusion documentation, what do you do?ColdFusion stores the javascript reference to the AutoComplete instance in something called the ColdFusion.objectCache. ColdFusion.objectCache is like a struct, and used the ID of the Autosuggest as the key. This is really handy. Let’s look at how to get the YUI AutoComplete object for a specific CFInput Autosuggest:
Now you can attach callbacks to a number of helpful events, like itemSelectEvent and textboxBlurEvent, allowing you to make even richer interfaces while staying with the standard ColdFusion libraries. Here is an example of how to attach a simple alert fuction to one of the YUI AutoComplete events:
In the above example, I’ve attached my custom javascript function alertme to the itemSelectEvent which will give me the value of the AutoSuggest when those two events fire.
You can view/interact with a working example of a ColdFusion custom AutoSuggest and view the source to help you along.
Of course, the real point to all this is much deeper than just the itemSelectEvent. Now that you can get ahold of the underlying YUI object through the ColdFusion.objectCache, you can do whatever you want!
Take a look at the documentation for the YUI AutoComplete widget for inspiration!