A Facebook-Like List auto complete Using FCBKcomplete, JQuery and Coldfusion

Friday 25 February 2011 05:19 PM

FCBKcomplete is a JQuery-based, Facebook-like, AJAX-capable auto complete input file––and it’s beautiful! Click here for the demo page. Click here to download. Emposha, the brilliant dude behind this neat piece of coding, releases regular updates, so be sure to download the latest version. For this post, I’m using the most current version as of today, 2.7.4

I’m trying to create a simple ColdFusion wrapper for FCBKcomplete, write a CFC file to grab data from one of my tables, and then pass the data to FCBKcomplete. First things first, I need to include JQuery. I use JQuery on most of my web pages, so I include JQuery on top of my page in a header template. I'm not going to include JQuery in the wrapper.

1: <script type="text/javascript" src="http://cflove.org/js/jquery/jquery-1.4.2.min.js"></script>

Next, include FCBKcomplete, JavaScript, and CSS files.

1: <link rel="stylesheet" href="http://cflove.org/examples/FCBKcomplete/style.css" media="screen" charset="utf-8" />

2: <script src="http://cflove.org/examples/FCBKcomplete/jquery.fcbkcomplete.min.js" charset="utf-8"></script>

Show/Hide Line Numbers . Full Screen . Plain

FCBKcomplete works on an HTML drop-down list box, so I have created an empty drop down list box.

1: <select name="mykeywords" id="mykeywords"></select>

Now, apply FCBKcomplete to the mykeywords box, and call it my keywords.cfc. Be sure to method "keywords" as an Ajax source.

1: <script type="text/javascript">

2: $("#mykeywords").fcbkcomplete({json_url:"http://cflove.org/examples/FCBKcomplete/keywords.cfc?method=keywords&returnFormat=json"});

3: </script>

Show/Hide Line Numbers . Full Screen . Plain

Coldfusion 8 and higher are capable of returning JSON-formatted data on demand. If your version is 7 or older, you need to use cfjson.cfc. Next, here is the Keywords.cfc file. Since FCBKcomplete Ajax requests require JSON Array with the variable [caption] for a display name and the variable [value] for a value ID, I converted my query results into an array.

 <cfcomponent displayname="keywords" output="no">
 <cffunction name="keywords" access="remote" output="No">
 <cfargument name="tag" required="No"  type="string" default="">
 
 <cfquery name="local.get" datasource="#application.ds#" username="#application.un#" password="#application.pw#">
   SELECT top 5 bloglabelid, bloglabelname
   FROM bloglabel 
 <cfif len(arguments.tag)>
   where bloglabelname like '%#arguments.tag#%'
 </cfif>
 </cfquery>
 
 <cfset local.return = ArrayNew(1)>
 <cfoutput query="local.get">
 <cfset local.return[local.get.currentRow]['caption'] = local.get.bloglabelname>
 <cfset local.return[local.get.currentRow]['value'] = local.get.bloglabelid>
 </cfoutput>
 
 <cfreturn local.return>
 </cffunction>
 </cfcomponent>

Show/Hide Line Numbers . Full Screen . Plain

Now, lets give it a try. Type a into the box below.

I added all of these into a single Custom Tag with some extra options.

 <cfparam name="attributes.data"    default="">
 <cfparam name="attributes.cache"    default="false">
 <cfparam name="attributes.filter_case"    default="false">
 <cfparam name="attributes.filter_hide"    default="true">
 <cfparam name="attributes.filter_selected" default="true">
 <cfparam name="attributes.firstselected" default="true">
 <cfparam name="attributes.newel" default="false">
 <cfparam name="attributes.jsfolder"    default="/examples/FCBKcomplete">
 <cfswitch expression="#thisTag.ExecutionMode#">
 <cfcase value="start">
 <cfif not StructKeyExists(request,'listSelectID')>
 <cfset request.listSelectID = 1>
 <cfoutput>
 <cfsavecontent variable="script">
 <link rel="stylesheet" href="#attributes.jsfolder#/style.css" type="text/css" media="screen" charset="utf-8" />
 <script src="#attributes.jsfolder#/jquery.fcbkcomplete.js" type="text/javascript" charset="utf-8"></script>
 </cfsavecontent>
 </cfoutput>
 <cfhtmlhead text="#script#">
 <cfelse>
 <cfset request.listSelectID = 1+request.listSelectID>
 </cfif>
 <cfoutput><span id="listSelect#request.listSelectID#"></cfoutput>
 </cfcase>
 <cfdefaultcase>
 </span>
 <cfsavecontent variable="script">
 <script type="text/javascript">
 $(document).ready(function() { 
 <cfoutput>$("##listSelect#request.listSelectID# select").fcbkcomplete({ 
 json_url: "#attributes.data#", 
 cache:#attributes.cache#,filter_case:#attributes.filter_case#,filter_hide:#attributes.filter_hide#,filter_selected:#attributes.filter_selected#,firstselected:#attributes.firstselected#,newel:#attributes.newel#
 }); 
 </cfoutput>
 var w = $('.holder').outerWidth() 
 $('.facebook-auto').width( w ) 
 $('.facebook-auto ul').width( w ) 
 }) 
 </script>
 </cfsavecontent>
 <cfhtmlhead text="#script#">
 </cfdefaultcase>
 </cfswitch>

Show/Hide Line Numbers . Full Screen . Plain

Save this code as, for example, FCBKcomplete.cfm, and then wrap that around your selection box as a custom tag.

 <cf_FCBKcomplete
     data = "examples/FCBKcomplete/keywords.cfc?method=keywords&returnFormat=json">
 <select name="mykeywords"></select>
 </cf_FCBKcomplete >

Show/Hide Line Numbers . Full Screen . Plain

Finally, provide the path to your Ajax list source cfc file, being sure to include the JavaScript files as well. You’re good to go!

Demo

Download (FCBKcomplete.zip)

Posted by Saman W Jayasekara at Wednesday 02 June 2010 09:32 AM . JavaScript . ColdFusion