How to customize the ColdFusion AutoSuggest

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:

view plain print about
1<cfinput type="text" name="language" autosuggest="english,spanish,french">

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.

view plain print about
1<cfinput type="text" name="language" autosuggest="javascript:doSomethingJavascripty( {cfautosuggestvalue} )" />

view plain print about
1<cfinput type="text" name="language" autosuggest="cfc:DoSomething.coldFusiony( {cfautosuggestvalue} )" />

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:

view plain print about
1<!--- When rendered, the ID of the input field will be 'language'--->
2<cfinput type="text" name="language" autosuggest="cfc:DoSomething.coldFusiony({cfautosuggestvalue})" />
3<script type="text/javascript">
4//I'll be the reference to the above YUI AutoComplete instance
5var lang = ColdFusion.objectCache[ 'language' ];

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:

view plain print about
1<cfinput type="text" name="language" autosuggest="javascript:doSomethingJavascripty( {cfautosuggestvalue} )" />
2<script type="text/javascript">
3//get the reference to the YUI AutoComplete instance
4var lang = ColdFusion.objectCache[ 'language' ];
6//Trigger the itemSelectEvent for this instance
7lang.itemSelectEvent.subscribe( alertme );
9//the alertme function
10var alertme = function( value ){
11    alert( value )
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!

There are no comments for this entry.

Add Comment Subscribe to Comments

2/16/10 9:07 AM # Posted By Louis Kellam

I am trying this out and I am unable to get an alert to popup using your example. I really would love to see this in action

2/16/10 9:42 AM # Posted By Dan Wilson


I'd have to look at your code for a better look. If you want to pastebin it here: I'll try to look at it on my lunch break.

I must warn you, the snippets above aren't going to run as a full example. I've posted a full example over here:


2/16/10 11:01 AM # Posted By Louis Kellam

Ok well my code is pretty much based on the code you have in the snippets above. I am looking for a simple example of using a yui autosuggest event to run another function.

2/16/10 11:05 AM # Posted By Dan Wilson

Awesome Louis.... viewing source on the example will show you the parts you want to see.


2/16/10 11:47 AM # Posted By louis kellam

I assume that the autosuggest.js file should be the focus of my attention. But my JS is not as strong as it should be. I am having a hard time identifying what is the appropriate syntax and what is your custom variable names.

2/16/10 11:48 AM # Posted By louis kellam

i meant autosuggesthelper.js file

8/2/10 8:24 AM # Posted By Stblumberg

Many thanks for the examples! You've made a great work. As for me, I'm not a pro yet. I'm learning everything almost on my own. I only attend different seminars from time to time. It is cool that nowadays there are so many of them and it it is easy to check them. I usually use I use it not only to find out if there will be any tutorials but also different interesting events. But it is not this I wanted to say. It is really great what you've done. I'll try it. Now, it seems quite easy.

8/13/10 1:06 PM # Posted By Sajjan Sarkar

I too couldnt get it to work until I added the event handler in a delayed script using ajaxOnLoad. I've put up a simple example at

8/25/10 1:18 PM # Posted By Sajjan Sarkar

My auto suggest list returns a long list and i'd like the user to be able to scroll the list. The mouse roller scrolls perfectly,but if I want to scroll using the vertical scroll bar (as many of our users dont have scroll mice) it just disappears.
I have tried to override the CSS by including the following attribute below but it doesnt work.I have tried various CSS tricks (like wrapping in another DIV and changing position values) to no avail.Please help!


11/22/10 9:54 AM # Posted By Girma

Sajjan, I have a similar CSS issue. Have you figured how to customize?

4/27/11 7:50 AM # Posted By Sajjan Sarkar

@Girma: Unfortunately I still havent :( I posted on adobe forums but havent received any replies.I tried absolutely every CSS trick I knew but couldnt get it to work. Please let me know if you found a way to fix it!

4/28/11 7:39 AM # Posted By Sajjan Sarkar

@Girma: No , havent been able to, in the end moved it to a jQuery autosuggest. :( Please post if u have found an answer.

Add Comment Subscribe to Comments