使用jQueryUI的新自动完成功能的多列结果的快速示例？

Question

我刚刚发现jQueryUI现在拥有它自己的内置自动完成组合框.好消息!

不幸的是,我发现的下一件事是,使它成为多列似乎并不那么简单(至少通过文档).

这里有一篇帖子,有人提到他们已经完成了(甚至提供了代码),但是我很难理解他们的一些代码在做什么.

我很好奇,如果有人之前遇到过这个问题,可以发布一个快速简便的样本来制作多列结果集.

非常感谢提前.

Answer 1

毕竟我最终手动覆盖了_renderMenu和_renderItem函数.到目前为止,它就像一个魅力,实际上很容易做到.我希望有一个"每个实例"的解决方案,但是当我们来到它时,我们会烧掉那个桥梁.这就是它的结果,再次感谢!

$.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
});

​

Answer 2

I managed to get the full menu functionality working with a table layout, including selection, highlighting etc. I found that it is impossible to use <table><tr><td> with autocomplete but you can put <div> inside the autocomplete items and use display: table-cell in CSS. This works from IE8 onwards and all the main modern browsers.

$.widget("custom.threecolumnautocomplete", $.ui.autocomplete,
    {
        _renderMenu: function( ul, items )
        {
            ul.addClass("threecolumnautocomplete");
            return this._super(ul, items);
        },

        _renderItem: function (ul, item)
        {
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a><div class='col'>" + item.id + "</div><div class='col'>" + item.value + "</div><div class='col'>" + item.cp + "</div></a>")
                .appendTo(ul);
        }
    });

And then define CSS like this:

.threecolumnautocomplete li { display: table-row-group; }

.threecolumnautocomplete a { display: table-row !important; }

.threecolumnautocomplete .col { display: table-cell; }

.ie7 .threecolumnautocomplete .col { display: block; float: left; width: 15em; overflow: hidden; white-space: nowrap; }

This also shows a basic override with fixed width columns that works in IE7. To use this add the ie7 class higher up the document, e.g. on the body element.