与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).

有一个后这里如果有人提到，他们已经做到了（甚至给出了code），但我无法理解什么是他们的一些code的做。

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屋！