AaronGreenlee.com | jQuery Liquid Height Autocomplete with Background

This code was updated 6/16/2010 to resolve a bug found in Chrome.

The Generated HTML with Liquid Background Center

Last week I was asked to modify the appearance for results generated by the jQuery Autocomplete plugin for a site WRECKINGBALL was about to launch and discovered I needed to enhance the autocomplete plugin to achieve the desired results.

Problem: The autocomplete plugin only provided a single DIV to style with the class (ac_results). This forced the div to have a fixed height which looked weird when only a few results were returned.

Solution: Modify the jQuery autocomplete plugin to provide end-caps for the results.

Before and After

The following illustrates how the autocomplete plugin results looked before and after my change to the plugin. On the left you can see the fixed height and the undesired extra space.

How to Invoke with New 'CAP' Option

To benefit from this new feature I added to the jQuery autocomplete plugin, simply add an additional option 'cap' to your declaration.

New Option

$("#quick-search")
	.autocomplete(
		 data
		,{	 dataType: "xml"
			,datakey: "string"
			,max: 100
			// New option to enable caps
			,cap: true
		}
	);

Custom Style to the Autocomplete Results

The following image illustrates the HTML that will be injected into the DOM.

HTML Injected Into DOM

<div class="ac_results">
	<div class="ac_results_head"></div>
	<div class="ac_results_body">
		<ul>
			<li>Results...</li>
			<li>Results...</li>
			<li>Results...</li>
		</ul>
	</div>
	<div class="ac_results_foot"></div>
</div>

Here is a quick view of the CSS I used. Adjust as desired.

The CSS for the Results and Caps

div.ac_results{
	z-index:10;
	width:257px!important;
	margin:0 0 0 -7px;
}

div.ac_results_head {
	background-image	: url(/autocomplete_bg_head.png);
	background-repeat	: no-repeat;
	height				: 7px;
}

div.ac_results_body {
	background-image	: url(/autocomplete_bg_body.png);
	background-repeat	: repeat-y;
	padding				: 5px 14px;
}

div.ac_results_foot {
	background-repeat	: no-repeat;
	background-image	: url(/autocomplete_bg_foot.png);
	height				: 10px;
}

The Modifications to the Plugin

Changes to Add New Default Option

$.Autocompleter.defaults = {
	inputClass: "ac_input",
	resultsClass: "ac_results",
	loadingClass: "ac_loading",
	minChars: 1,
	cap: false,
	delay: 400,
	matchCase: false,
	matchSubset: true,
	matchContains: false,
	cacheLength: 10,
	max: 100,
	mustMatch: false,
	extraParams: {},
	selectFirst: true,
	formatItem: function(row) { return row[0]; },
	formatMatch: null,
	autoFill: false,
	width: 0,
	multiple: false,
	multipleSeparator: ", ",
	highlight: function(value, term) {
		return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
	},
    scroll: true,
    scrollHeight: 180
};

Changes to Allow Caps for Results

function init() {
	if (!needsInit)
		return;
	
	element = $("<div/>")
	.hide()
	.addClass(options.resultsClass)
	.css("position", "absolute")
	.appendTo(document.body);

    // Add top/middle/bottom caps for syling
    if (options.cap) {
        element.html('<div id="ac_results_head"></div><div id="ac_results_body"></div><div id="ac_results_foot"></div>');
        element = $('#ac_results_body');
    }
	
	list = $("<ul/>").appendTo(element).mouseover( function(event) {
		if(target(event).nodeName && target(event).nodeName.toUpperCase() == 'LI') {
            active = $("li", list).removeClass(CLASSES.ACTIVE).index(target(event));
		    $(target(event)).addClass(CLASSES.ACTIVE);            
        }
	}).click(function(event) {
		$(target(event)).addClass(CLASSES.ACTIVE);
		select();
		// TODO provide option to avoid setting focus again after selection? useful for cleanup-on-focus
		input.focus();
		//return false;
	}).mousedown(function() {
		config.mouseDownOnSelect = true;
	}).mouseup(function() {
		config.mouseDownOnSelect = false;
	});
	
	// Reset element if we are capping
	if (options.cap)
		element = $('.' + options.resultsClass);
		
	if( options.width > 0 )
		element.css("width", options.width);
		
	needsInit = false;
}

Credits

I am putting the jQuery Liquid Autocomplete plugin back into the community. Only a few minor changes were made to the work done by Jörn Zaefferer who has created many great jQuery plugins. You can download the original, unmodified plugin or access the original documentation.

Soon, I hope the WRECKINGBALL project that required this change will be online so I can link from here as well.

UPDATE: 6/16/2010 The project that demanded this change is now online. This morning the WRECKINGBALL Media Group launched the fourth generation of Time Warner Cable's Video On Demand site. You can check out the team's hard work here: http://www.twondemand.com/