Download the EasyCFM.COM Browser Toolbar!
Simple Suggest List using Scriptaculous

Auto Complete with Scriptaculous

Figure 1.0

Download Code Download Scriptaculous

Overview:

Index.cfm
There are four things needed to setup the main page for auto complete.

  1. Include the prototype.js file.
  2. Include the scriptaculous.js file.
  3. Add an input html tag for the textbox.
  4. Add a div html tag for the results.
  5. Call the Ajax.Autocompleter function.

Names.cfm

There are three things needed to send the data back to the main page.

  1. Account for the form filed that was sent in.
  2. Query the data.
  3. Return the results in a html formatted unordered list.

That is the basic idea.

Code Walk Through:

Index.cfm

First, download the latest version of scriptaculous from http://script.aculo.us/. Scriptaculous comes with Prototype which is a JavaScript framework for making AJAX and Javascript easier.
In the head of the page, include the Prototype framework first and the Scriptaculous library second.
<script type="text/javascript" src="/includes/scriptaculous-js-1.6.1/prototype.js"></script>
<script type=
"text/javascript" src="/includes/scriptaculous-js-1.6.1/scriptaculous.js"></script>
In the body of the page, include the text box for the user to enter the text and a Div to select options from.
<input type="text" id="lastname" name="lastname_parameter" />
<div id="lastname_choices" class="name"></div>
After the text box and div, call the function that will handle the suggest list.
new Ajax.Autocompleter("firstname", "firstname_choices", "names.cfm", {});

Names.cfm
For any AJAX application I like to use cfsilent to manage white space. I usually store the output to a variable and output it on the same line at the closing cfsilent.
<cfsilent>
Since the example page uses two auto complete lists and we are using the same data file for both, let's resolve the FORM variables into a single variable.

<cfif isdefined("FORM.firstname_parameter")>
   <cfset name_parameter = FORM.firstname_parameter>
<cfelseif isdefined(
"FORM.lastname_parameter")>
   <cfset name_parameter = FORM.lastname_parameter>
<cfelse>
   <cfset name_parameter =
"">
</cfif>

Next, query the data. I recommend to at least limit the number of results. The are other tricks to minimize the load this causes like caching the single letter queries or only running on even number of characters.
<cfquery name="getNames" datasource="#dsn#" username="#dsnUserName#" password="#dsnPassword#">
    SELECT firstname
    FROM examples_names
    WHERE firstname LIKE <cfqueryparam cfsqltype="cf_sql_varchar" value="#name_parameter#%">
    ORDER BY firstname
    LIMIT 10
</cfquery>

Finally, return the results as an unordered list. Since I limited the results to 10, I need to add a message to notify the user to refine the search further.
</cfsilent>

<ul>
    <cfoutput query="getNames">
        <li>#getNames.FIRSTNAME#</li>
    </cfoutput>
    <cfif getNames.RECORDCOUNT EQ 10>
        <li>...more (refine search)</li>
    </cfif>
</ul>

That is all, I was amazed how simple this was to implement the first time I did it.



All ColdFusion Tutorials By Author: Kris Brixon
  • Building Excel Spreadsheets via XML
    Building Excel spreadsheets using Microsofts SpreadsheetML XML dialect.
    Author: Kris Brixon
    Views: 16,894
    Posted Date: Tuesday, January 24, 2006
  • Easy Table Sort / Page using AJAX
    Table sort and paging using AJAX calls to fill a div that will be the container for the table. See the following page for a live demo. http://www.brixontech.com/examples/table/index.cfm
    Author: Kris Brixon
    Views: 18,966
    Posted Date: Sunday, August 13, 2006
  • Simple Suggest List using Scriptaculous
    This tutorial shows the suggest list (auto complete) idea using the built in functions in Scriptaculous with a CF data page. Working example at: http://www.brixontech.com/examples/webtwo/autocomplete/index.cfm
    Author: Kris Brixon
    Views: 14,948
    Posted Date: Sunday, July 30, 2006
  • Task Scheduler without the Administrator
    See link for tutorial and files: http://www.brixontech.com/examples/scheduler/index.cfm The scheduled task manager in the ColdFusion Administrator can be replicated outside of the administrator. You can add, update, run, and delete scheduled tasks from a tag and you can list all tasks using the unsupported ServiceFactory class.
    Author: Kris Brixon
    Views: 11,381
    Posted Date: Friday, August 11, 2006