Simple JQuery Autosuggest Dropdown ColdFusion Custom Tag

Before I found JQuery or JQuery found me and fall in internal blissful love, I wrote an autosuggest dropdown function which I have been using for years. It took almost a week to write and the code stretch as far as my house to Minnesota. Recently I caught in a habit of simplifying my old pure JavaScript function to JQuery and this function caught me today. After around 20 lines of JavaScript and couple of hours of testing and tweaking this starts to work better than my original function.

This is a very simple and lightweight autosuggest dropdown input combo function. All you have to do is wrap the custom tag around your html input tag and point to a data feed. Data feed is delimited (the default delimiter is pipe | ) word list, not a JSON array, so that won’t give even a slightest trouble when working with older CF servers. This tag doesn’t have “key stoke delay” or ability to select items using the “key down”. That’s a small sacrifice I made to keep it simple as it is. Click here for example.

Call :

   1: <cf_asug url="demo.cfc?method=state">

   2: <input type="text" name="myinput" />

   3: </cf_asug>

Show/Hide Line Numbers . Full Screen . Plain

   1: <cfparam name="request.autosuggest" default="0">

   2: <cfparam name="request.url"    default="">

   3: <cfparam name="attributes.delimiter" default="|">

   4: <cfparam name="attributes.url"    default="#request.url#">

   5: <Cfset request.url = attributes.url>

   6: <cfset autosuggest = val(request.autosuggest+1)>

   7: <cfswitch expression="#thisTag.ExecutionMode#">

   8: <cfcase value="start">

   9:  <cfsavecontent variable="js">

  10:  <cfif not val(request.autosuggest)>

  11:  <style type="text/css">

  12:     .autosuggest    {position:relative; display:inline-block}

  13:     .autosuggest ul    {position:absolute; font-family:Verdana, Geneva, sans-serif; font-size:11px; max-height:80px; background-color:#F7F7F3; display:none; border-bottom:1px solid #CCC; z-index:10; list-style:none; padding:0px; margin:0px; clear:both; overflow-x:hidden; overflow-y:auto;}

  14:     .autosuggest li    {margin:0px; padding-left:3px; padding-top:4px; padding-bottom:4px; list-style:none; border-top:1px solid #E0E0E0; border-left:1px solid #CCC; border-right:1px solid #CCC;}

  15:     .autosuggest li:hover {background-color:#D7F2FF}

  16:     .autosuggest li:first-child {border-top:none;}

  17:  </style>

  18:  <!--- ********************************************************* --->

  19:  <!--- Auto Suggest Plugin                                        --->

  20:  <!--- ********************************************************* --->

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

  22:     (function($){

  23:     $.fn.extend({

  24:      autosuggest: function(options) {

  25:      $(this).children('input').attr('autocomplete','off').bind('focus keyup', function(){

  26:         $.ajax({url: options.url+"&returnformat=plain&string="+$(this).val(), dataType: "text", cache:false, context: this, success: function(data){

  27:         var list = data.split( options.delimiter );

  28:         var li    = "";

  29:         if ( $.trim(list) !== "") {for ( var i=list.length-1; i>=0; --i ){ li = li + '<li>'+$.trim(list[i])+'</li>'}

  30:          $(this).next().html(li).slideDown('fast').children('li').click(

  31:          function(){ $(this).parent().slideUp('fast').prev().val( $(this).text() )}

  32:          );

  33:         } else { $(this).next().css('display','none') }

  34:         }})

  35:      }).blur(function() {

  36:         if ( $(this).next().attr('active') == 'f' ) { $(this).next().delay(1000).slideUp('fast') }

  37:      })

  38:      $(this).children('ul').width( $(this).children('input').outerWidth() ).hover(

  39:         function(){ $(this).attr('active','t') }, function(){ $(this).attr('active','f').prev().trigger('blur') }

  40:      )

  41:      }

  42:     });

  43:     })(jQuery);

  44:     </script>

  45:  </cfif>

  46:  </cfsavecontent>

  47:  <cfhtmlhead text="#js#">

  48:  <cfoutput><div class="autosuggest" id="autosuggest#autosuggest#"></cfoutput>

  49: </cfcase>

  50: <cfdefaultcase><ul></ul></div>

  51: <cfoutput>

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

  53: <!--- ********************************************************* --->

  54: <!--- Call the Auto Suggest                                     --->

  55: <!--- ********************************************************* --->

  56: $(document).ready(function(){$('##autosuggest1').autosuggest({ url:"#attributes.url#", delimiter:"#attributes.delimiter#"})})

  57: </script>

  58: </cfoutput>

  59: </cfdefaultcase>

  60: </cfswitch>

Show/Hide Line Numbers . Full Screen . Plain