Dynamic search filtering with jQuery
First we set up a simple page that will contain our search box and has the div container that will hold our search box:
Everything here is pretty self-explanatory. I created a text input creatively named search, then bound the key up even to the updateQuery() function which in turn updates the userlist div that holds our search results. The page that actually populates the results, query.cfm, is listed below:
<cfparam name="search" type="string" default=""> <cfquery name="q" datasource="datasource"> SELECT MemberID, LastName, MiddleName, FirstName FROM members <cfif len(search)> WHERE Concat(FirstName, ' ', MiddleName, ' ', LastName) LIKE <cfqueryparam cfsqltype="cf_sql_varchar" value="%#search#%" /> </cfif> ORDER BY LastName, FirstName </cfquery> <cfoutput>#q.recordCount# User(s) Found</cfoutput> <br /> <br /> <cfoutput query="q"> <a href="somepage.cfm?ID=#MemberID#" style="color: blue;">#LastName#, #FirstName# #MiddleName#</a><br /> </cfoutput>
The page accepts one parameter, URL.search which is supplied by the calling page and if it is not supplied, it defaults to an empty string. If the search parameter is sent, I am combining individual fields in the database to get the members full name and searching against that.
With a few lines of code we get a pretty cool effect. This can be easily modified to fit any given situation so maybe someone will find it useful.