|
|
Simple "Filter As You Type" ColdFusion 8 Demo
By Raymond Camden
Expert Author
Article Date: 2007-08-06
I was writing some samples for the new CFWACK and built something short and cute that I thought was worth sharing now. If you look at the search form on ColdFusionBloggers you will see that it does a dynamic replacement on the main content area when you perform a search (if you are on the home page).
This is handy but I was curious about other ways of doing it. Consider this simple example:
<form>Search: <input type="text" name="search"><input type="button" value="Search"></form>
<cfdiv bind="url:results.cfm?search={search}" />
The first line is an extremely simple form. The second line is the cool one. I've bound a CFDIV to a results page. By using {search} in the bind, I've set it so that every time the value changes, the contents will change. You can see this in action here:
http://www.coldfusionjedi.com/demos/ajaxsearch/index2.cfm
You can enter a term and either click outside the box or hit the button. (Don't hit Return/Enter.) While that works, an even slicker version is this:
<form>Search: <input type="text" name="search"></form>
<cfdiv bind="url:results.cfm?search={search@keypress}" />
I've removed the button and notice now my bind is based on search@keypress. The @ symbol means I'm defining an event to listen to. Instead of onChange, I've used keypress (when using this format, drop the "on"). Now you get "filter as you type" search, all in 2 lines of code without a line of JavaScript. You can see this demo here:
http://www.coldfusionjedi.com/demos/ajaxsearch
While not the prettiest demo, and not the most elegant (you don't want to type very fast), it's darn tooting sweet how simple the code is. Just in case folks are curious, here is the code for results.cfm. It isn't anything special or "CF8-ish":
<cfparam name="url.search" default="">
<cfset url.search = htmlEditFormat(url.search)>
<cfset url.search = left(url.search,255)>
<cfquery name="results" datasource="coldfusionjedi">
select top 10 id, title, posted
from tblblogentries
where title like <cfqueryparam cfsqltype="cf_sql_varchar" value="%#url.search#%" maxlength="255">
order by posted desc
</cfquery>
<table border="1">
<tr>
<td>Title</td><td>Posted</td>
</tr>
<cfoutput query="results">
<tr>
<td><a href="http://www.coldfusionjedi.com/index.cfm?mode=entry&entry=#id#">#title#</a></td>
<td>#dateFormat(posted)# #timeFormat(posted)#</td>
</tr>
</cfoutput>
</table>
Who here thinks it would be nice to have a list of cool ColdFusion 8 AJAX sites? I don't mean my ugly little demos, but production sites making use of the technology? I'd happily start a list and link to it under Guides.
Comments
About the Author:
Raymond Camden, ray@camdenfamily.com
http://ray.camdenfamily.com
Raymond Camden is Vice President of Technology for roundpeg, Inc. A long
time ColdFusion user, Raymond has worked on numerous ColdFusion books
and is the creator of many of the most popular ColdFusion community web
sites. He is an Adobe Community Expert, user group manager, and the
proud father of three little bundles of joy.
|
|
|
|
