jQueryUI新的自动填充功能的多列结果的快速示例?

前端之家收集整理的这篇文章主要介绍了jQueryUI新的自动填充功能的多列结果的快速示例?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我刚才发现了 jQueryUI now has it’s own built-in auto-complete combo box.好消息!

不幸的是,接下来我发现,使它成为多列似乎几乎没有那么简单(至少通过文档).

有一个post here,有人提到他们已经做了(甚至给出代码),但我无法理解他们的一些代码正在做什么.

我只是好奇,如果有人曾经碰过这个,可以发布一个快速和容易的样品,制作一个多列结果集.

提前多谢.

解决方法

我最终手动覆盖了_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
});

猜你在找的jQuery相关文章