About Dan Wilson
Dan Wilson
Dan Wilson
Model-Glue:Gesture for Fun and Profit
Watch Video
Presentation Files
DataCurl LLC, My Company
2010 Speaking Engagements
Video Interviews
DZone Articles
How to customize the ColdFusion AutoSuggest
Posted By : Dan Wilson
January 13, 2010 7:11 AM
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:
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' ];
6</script>
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:
2<script type="text/javascript">
3//get the reference to the YUI AutoComplete instance
4var lang = ColdFusion.objectCache[ 'language' ];
5
6//Trigger the itemSelectEvent for this instance
7lang.itemSelectEvent.subscribe( alertme );
8
9//the alertme function
10var alertme = function( value ){
11 alert( value )
12};
13</script>
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
Louis,
I'd have to look at your code for a better look. If you want to pastebin it here: http://nodans.pastebin.com 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: http://www.nodans.com/custom/examples/cf9/CustomAu...
DW
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.
Awesome Louis.... viewing source on the example will show you the parts you want to see.
DW
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.
i meant autosuggesthelper.js file
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 http://www.carehart.org/cf411/. 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.
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 http://sajjansarkar.blogspot.com/
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!
div.autosuggest
{
overflow:scroll;
position:relative;
float:left;
}
Sajjan, I have a similar CSS issue. Have you figured how to customize?
@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!
@Girma: No , havent been able to, in the end moved it to a jQuery autosuggest. :( Please post if u have found an answer.
Suscribe
Follow Us
Contact
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