Before jumping into the deep end, let’s look at the various built-in functions that ColdFusion 8 has got to offer.

CFINPUT now includes an autosuggest feature (only available for type=”text”). This entry completion suggestions feature matches and displays the suggestion as the user types into the text input field. The user will be able to select the suggestion to complete the entry. To activate this feature, simply pass the list of suggested words (seperated by commas) into the ‘autosuggest’ parameter field.

search.cfm

<cfquery datasource=”myDB” name=”data”>
SELECT DISTINCT company_name FROM company_data
</cfquery>

<cfform>
Name:  <cfinput type=”text” name=”company” autosuggest=”#ValueList(data.company_name)#”>
</cfform>

For the above codes, the look up for suggestions are not asynchronous. All data is retrieved during the loading of the page and hence only local data. This method is usually preferred for smaller list and information which are not required to be real time.

If you require real time information or have a long suggestion list, you may consider binding an expressions to the autosuggest field. Using ‘bind’, communications will be made to the server to retrieve live data. You may manipulate your data in the function and control your returns in anyway you please. Example as follow:

daoCompany.cfc

<cfcomponent output=”false”>
<cffunction name=”lookupName” access=”remote” returntype=”array”>
<cfargument name=”search” type=”any” required=”false” default=”">
<cfquery datasource=”myDB” name=”data”>
SELECT TOP 5 first_name FROM company_staff
WHERE UCase(first_name) LIKE Ucase(’#ARGUMENTS.search#%’)
ORDER BY artname
</cfquery>
<cfset var result=ArrayNew(1)>
<cfloop query=”data”>
<cfset ArrayAppend(result, first_name)>
</cfloop>
<cfreturn result>
</cffunction>
</cfcomponent>

search_dyn.cfm

<cfform>
Name:
<cfinput type=”text” name=”company” autosuggest=”cfc:daoCompany.lookupName({cfautosuggestvalue})”>
</cfform>

AJAX (Asynchronous JavaScript and XML) enables web components to exchange data without being dependent on the loading and reloading of the entire webpage it resides on. It is often seen as a powerful tool to transform and enrich our web pages with more interactivity and engagement.Used by millions, FaceBook offers a fine example of the capabilities of AJAX in action. You would have noticed the functions to approve friends, add friend details send invites are all done without ever requiring reloading the page.

ColdFusion 8 simplifies such implementation by offering a wide array of tags and functions to enable quick development of such applications. ColdFusion reduces the technical challenges by simplifying the frameworks and user interface element libraries. If you are familiar with CFFUNCTION, connectivity to server-side resources such as databases is a breeze.

Detailed functions will be discussed later.