使用 jQueryUI 的新自动完成功能的多列结果的快速示例? [英] Quick example of multi-column results with jQueryUI's new Autocomplete?

问题描述

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

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.

非常感谢.

推荐答案

毕竟我最终手动覆盖了 _renderMenu 和 _renderItem 函数.到目前为止，它的作用就像一个魅力，实际上非常很容易做到.我希望有一个每个实例"的解决方案，但是当我们遇到它时，我们会烧掉那座桥.原来如此，再次感谢！

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

这篇关于使用 jQueryUI 的新自动完成功能的多列结果的快速示例?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！