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>

This entry was posted on Thursday, April 30th, 2009 at 10:02 am and is filed under AJAX, ColdFusion 8. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.