ColdFusion Ajax Tutorial 1: Auto-Suggest

I plan to post a series of examples demonstrating how to use the new Ajax functionality in ColdFusion 8 (many based on examples used during our recent usergroup tour). The first one I’ll start with is the auto-suggest control. Auto-suggest is a modified text input box, one that displays suggestions as the user types. The auto-suggest control in ColdFusion 8 can be used in two ways, with local client-side data, and with asynchronous calls back to ColdFusion.
Here’s a simple client-side data example (which uses one of the CF8 example databases, so this should work for you as is):

SELECT artname
FROM art
ORDER BY artname


This form displays a simple text box, but as text is entered, suggestions are displayed. The list of suggestions are passed to the autosuggest attribute which accepts a comma delimited list. The list could be hardcoded, but here ValueList() is being used to dynamically build a list based on a prior database lookup.
This is not an Ajax control in that lookups are not asynchronous, there is no communication back to the server to retrieve data, all data is local. This is actually a preferred form of auto-suggest for smaller lists.
For longer lists asynchronous interaction is indeed preferred, and the auto-suggest control supports this by allowing asynchronous calls to a ColdFusion component. Here is a sample CFC:

SELECT artname
FROM art
WHERE UCase(artname) LIKE Ucase('')
ORDER BY artname

This CFC has a single method named lookupArt which accepts a string and performs a query to find all matches that start with the specified value. Auto-suggest requires that results be returns in a single dimensional array (for now, hopefully this will change before we ship the final product), and so the code populates an array with the results which are then returned.
Now for the modified form code to use this CFC and method:


Here the autosuggest points to a CFC, and as the CFC (I named it art.cfc) is in the current folder, no path needs to be specified. When a user enters a value, generated JavaScript code triggers an asynchronous calls to the lookupArt method in art.cfc. {cfautosuggestvalue} gets automatically replaced with whatever value the user has entered, and that value is then used by the CFC in the lookup. When an array of results get returned the auto-suggest list gets populated.
Auto-suggest does not get any cleaner and simpler than this.

104 responses to “ColdFusion Ajax Tutorial 1: Auto-Suggest”

  1. Robin Avatar

    The CFC invoke bug is still in CF10! Any ideas on when this will be fixed?

  2. Angel Gonzalez Avatar
    Angel Gonzalez

    Are you still entertaining questions on this one?

  3. Brett Avatar

    Is there a way to modify the .cfc so that I can use this for FIRST and LAST names? In other words get two db table fields to show up in the autosuggest box.

  4. Jo Westra Avatar
    Jo Westra

    I get a weird thing that happens when I use
    autosuggest="#ValueList(". It prevents other input fields from being clicked on. Sometimes you can get lucky and get in one of the fields but usually nothing.
    You can see the value list appears for the 1st field, but the other fields are hard to get into. Any idea how to fix this?
    Thanks ahead of time. YOU ROCK!

Leave a Reply