Simple JQuery Autosuggest Dropdown ColdFusion Custom Tag

asug.cfm

<!--- ********************************************************* --->
<!--- Saman W Jayasekara : [email protected] (Oct 07 2011)         --->
<!--- ********************************************************* --->
<cfparam name="request.autosuggest"  	default="0">
<cfparam name="request.url"				default="">
<cfparam name="attributes.delimiter"	default="|">
<cfparam name="attributes.wait"			default="0">
<cfparam name="attributes.url"			default="#request.url#">
<cfset request.url			= attributes.url>

<cfswitch expression="#thisTag.ExecutionMode#">
<cfcase value="start">
	<cfsavecontent variable="js">
		<cfif not val(request.autosuggest)>
		<style type="text/css">
			.autosuggest			{position:relative; display:inline-block}
			.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;}
			.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;}
			.autosuggest li:hover	{background-color:#D7F2FF}
			.autosuggest li:first-child	{border-top:none;}
		</style>
		<!--- ********************************************************* --->
		<!--- Auto Suggest Plugin                                       --->
		<!--- ********************************************************* --->
			<script type="text/javascript">
			(function($){
				$.fn.extend({ 
					autosuggest: function(options) {
						$(this).children('input').attr('autocomplete','off').bind('focus keyup', function(){ 
							if ( $(this).val().length >= options.wait ) {
								$.ajax({url: options.url+"&returnformat=plain&string="+$(this).val(), dataType: "text", cache:false, context: this, success: function(data){
									var list	= data.split( options.delimiter );
									var li 		= '';
									if ( $.trim(list) !== '') {for ( var i=list.length-1; i>=0; --i ){ li = li + '<li>'+$.trim(list[i])+'</li>'}
										$(this).next().html(li).slideDown('fast').children('li').click( 
											function(){ $(this).parent().slideUp('fast').prev().val( $(this).text() )}
										);
									} else { $(this).next().css('display','none') }
								}})
							}
						}).blur(function() {
							if ( $(this).next().attr('active') == 'f' ) { $(this).next().delay(1000).slideUp('fast') }
						})

						$(this).children('ul').width( $(this).children('input').outerWidth() ).hover(
							function(){ $(this).attr('active','t') }, function(){ $(this).attr('active','f').prev().trigger('blur') }
						)
					}
				});
			})(jQuery);
			</script>
		</cfif>
	</cfsavecontent>
	<cfhtmlhead text="#js#">
	<cfoutput><div class="autosuggest" id="autosuggest#request.autosuggest#"></cfoutput>
</cfcase>

<cfdefaultcase><ul></ul></div>
<cfoutput>
<script type="text/javascript">
<!--- ********************************************************* --->
<!--- Call the Auto Suggest                                     --->
<!--- ********************************************************* --->
$(document).ready(function(){$('##autosuggest#request.autosuggest#').autosuggest({ url:"#attributes.url#", delimiter:"#attributes.delimiter#", wait:"#val(attributes.wait)#"})})
</script>
</cfoutput>
<cfset request.autosuggest	= val(request.autosuggest+1)>
</cfdefaultcase>
</cfswitch>