Question

I just found out that the jQueryUI now has it’s own built-in auto-complete combo box. Great news!

Unfortunately, the next thing I found is that making it multi-column doesn’t seem nearly that simple (at least via documentation).

There is a post here where someone mentions that they’ve done it (and even gives code), but I’m having trouble understanding what some of their code is doing.

I’m just curious if anyone has ran across this before and could post a quick and easy sample of making a multi-column result set.

Thanks much in advance.

Answer 1

I ended up manually overriding the _renderMenu and _renderItem functions after all. Works like a charm so far, and was actually very easy to do. I was hoping for a “per-instance” solution, but we’ll burn that bridge when we come to it. Here’s what it came to, and thanks again!

$.ui.autocomplete.prototype._renderMenu = function(ul, items) {
  var self = this;
  ul.append("<table><thead><tr><th>ID#</th><th>Name</th><th>Cool&nbsp;Points</th></tr></thead><tbody></tbody></table>");
  $.each( items, function( index, item ) {
    self._renderItem( ul.find("table tbody"), item );
  });
};

$.ui.autocomplete.prototype._renderItem = function(table, item) {
  return $( "<tr></tr>" )
    .data( "item.autocomplete", item )
    .append( "<td>"+item.id+"</td>"+"<td>"+item.value+"</td>"+"<td>"+item.cp+"</td>" )
    .appendTo( table );
};

$("#search").autocomplete({
  source: [
    {id:1,value:"Thomas",cp:134},
    {id:65,value:"Richard",cp:1743},
    {id:235,value:"Harold",cp:7342},
    {id:982,value:"Nina",cp:21843},
    {id:724,value:"Pinta",cp:35},
    {id:78,value:"Santa Maria",cp:787}],
  minLength: 1
});

​