I was searching for a way to do a jQuery multicolumn autocomplete with a search box, and kept coming up short. The solutions out there were more table based, with a single row of similar data.
On http://www.bowlingball.com I wanted to have 3 distinct columns when someone searched, the first was for product, the second for articles, and the third column would contain any matching pro shops.
Here’s how I did it, not saying this is elegant, but it works.
1) Create a custom autocomplete widget, based on the one that comes with jQueryUI.
2) Override the _renderMenu function
a) This sets up my columns, and their headers
b) Used CSS to format and float them so that they are side by side.
c) Used $.each to run through the items, examine item.category (set via Ajax data) and appended that to the appropriate column
3) Created a _renderItem that creates each individual item.
a) This creates the div of the item to be appended. It checks for certain pieces such as an image and uses that to create the view
Using jQueryUI autocomplete:
$.widget(“custom.catcomplete”, $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
var self = this;
ul.css(‘z-index’, ‘99999’);
ul.append(“<div id=’productColumn’><div class=’autoCellHeader’>Products</div></div>” +
“<div id=’articleColumn’><div class=’autoCellHeader’>BowlVersity Articles</div></div>” +
“<div id=’proshopColumn’><div class=’autoCellHeader’>Pro Shop Locator</div></div>” +
“<div style=’clear:both;’></div>”);
$.each( items, function( index, item ) {
var column = “#” + item.category + “Column”;
self._renderItem( ul.find(column), item);
});
},
_renderItem: function( appendTo, item) {
if (item.image) {
var cell = $(“<div class=’autoCell’></div>”);
cell.data( “item.autocomplete”, item )
var reviews = ”;
var image = ”;
var video = ”;
if (item.image) {
image = “<div class=’imgCell’><a href='” + item.value + “‘><img src='” + item.image + “‘ align=’left’ height=’35’ width=’35’/></a></div>”;
}
if (item.reviews) {
reviews = “<br/><a href='” + item.value +”&reviews=1#tabs’><img class=’reviews’ src='” + item.reviews + “‘ alt=’Read Reviews’ title=’Read Reviews’ />(” + item.reviewCount + ” reviews)<br/><img class=’reviews’ src=’http://c0004111.cdn.cloudfiles.rackspacecloud.com/ReadReviews_95x12.png’ alt=’Read Reviews’ title=’Read Reviews’ /></a>”;
}
if (item.video) {
video = “<a href='” + item.value + “&video=1#tabs’><img class=’video’ src=’http://c0004111.cdn.cloudfiles.rackspacecloud.com/WatchVideo_90x12.png’ style=’padding-left: 15px;’ alt=’Watch Video’ title=’Watch Video’ /></a>”;
}
cell.append( image + ‘<div><a href=”‘ + item.value + ‘”>’ + item.label + ‘</a>’ + reviews + video + ‘</div><div style=”clear:both;”></div>’ )
cell.appendTo( appendTo );
return cell;
}
else {
return $( “<div class=’autoCell’></div>” )
.data( “item.autocomplete”, item )
.append( ‘<a href=”‘ + item.value + ‘”>’ + item.label + ‘</a>’ )
.appendTo( appendTo );
}
}
});
My inspiration and guide came from http://stackoverflow.com/questions/2744747/quick-example-of-multi-column-results-with-jqueryuis-new-autocomplete which was using a table to align information.