我刚才发现了
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 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
- });
