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

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.

   1: <cfcomponent displayname="keywords" output="no">
   2: <cffunction name="keywords" access="remote" output="No">
   3:  <cfargument name="tag" required="No" type="string" default="">
   5:  <cfquery name="local.get" datasource="#application.ds#" username="#application.un#" password="#application.pw#">
   6:  SELECT top 5 bloglabelid, bloglabelname
   7:  FROM bloglabel
   8:  <cfif len(arguments.tag)>
   9:  where bloglabelname like '%#arguments.tag#%'
  10:  </cfif>
  11:  </cfquery>
  13:  <cfset local.return = ArrayNew(1)>
  14:  <cfoutput query="local.get">
  15:  <cfset local.return[local.get.currentRow]['caption'] = local.get.bloglabelname>
  16:  <cfset local.return[local.get.currentRow]['value'] = local.get.bloglabelid>
  17:  </cfoutput>
  19:  <cfreturn local.return>
  20: </cffunction>
  21: </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.

   1: <cfparam name="attributes.data"    default="">
   2: <cfparam name="attributes.cache"    default="false">
   3: <cfparam name="attributes.filter_case"    default="false">
   4: <cfparam name="attributes.filter_hide"    default="true">
   5: <cfparam name="attributes.filter_selected" default="true">
   6: <cfparam name="attributes.firstselected" default="true">
   7: <cfparam name="attributes.newel" default="false">
   8: <cfparam name="attributes.jsfolder"    default="/examples/FCBKcomplete">
   9: <cfswitch expression="#thisTag.ExecutionMode#">
  10: <cfcase value="start">
  11: <cfif not StructKeyExists(request,'listSelectID')>
  12: <cfset request.listSelectID = 1>
  13: <cfoutput>
  14: <cfsavecontent variable="script">
  15:  <link rel="stylesheet" href="#attributes.jsfolder#/style.css" type="text/css" media="screen" charset="utf-8" />
  16:  <script src="#attributes.jsfolder#/jquery.fcbkcomplete.js" type="text/javascript" charset="utf-8"></script>
  17: </cfsavecontent>
  18: </cfoutput>
  19: <cfhtmlhead text="#script#">
  20: <cfelse>
  21: <cfset request.listSelectID = 1+request.listSelectID>
  22: </cfif>
  23: <cfoutput><span id="listSelect#request.listSelectID#"></cfoutput>
  24: </cfcase>
  25: <cfdefaultcase>
  26: </span>
  27: <cfsavecontent variable="script">
  28: <script type="text/javascript">
  29: $(document).ready(function() {
  30: <cfoutput>$("##listSelect#request.listSelectID# select").fcbkcomplete({
  31: json_url: "#attributes.data#",
  32: cache:#attributes.cache#,filter_case:#attributes.filter_case#,filter_hide:#attributes.filter_hide#,filter_selected:#attributes.filter_selected#,firstselected:#attributes.firstselected#,newel:#attributes.newel#
  33: });
  34: </cfoutput>
  35: var w = $('.holder').outerWidth()
  36: $('.facebook-auto').width( w )
  37: $('.facebook-auto ul').width( w )
  38: })
  39: </script>
  40: </cfsavecontent>
  41: <cfhtmlhead text="#script#">
  42: </cfdefaultcase>
  43: </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.
   1: <cf_FCBKcomplete
   2:     data = "examples/FCBKcomplete/keywords.cfc?method=keywords&returnFormat=json">
   3:     <select name="mykeywords"></select>
   4:  </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!

Download (FCBKcomplete.zip)
Thursday 23 June 2011 02:31 AM
Your site, "Facebook Auto Like" Do not you want to add code? http://www.facebook.com/notes/matchlinkstv/sitenize-facebook-auto-like-kodu-eklemek-istemez-misiniz/169965679730597 Good Luck
Wednesday 14 July 2010 11:49 AM
What about receiving the vars after submitting the form? I'm getting an empty array from the fcbkcomplete input.
Friday 16 July 2010 12:47 PM
I just add a demo and all the demo files in to download. Hope that helps.
It returns the ['value'] you have send from the cfc file. if the value is empty, it should return the caption text.