将JQuery UI自动完成显示为表

Question

我正在使用JQuery UI的自动完成功能.我有许多值,以及一小组关键字,其中一个分配给每个值.我想在迷你表中显示每一对,关键字在一个单元格中,值在另一个单元格中.为此,我正在覆盖_renderItem,如文档中所述.但是,当我这样做时,单击一个值(或关键字)实际上并没有做任何事情,所以我不能选择任何值.我怀疑它与data("item.autocomplete", item)不在正确的地方有关.或者我可能需要覆盖更高的其他功能(_renderMenu或_suggest？)

$( "#tags" ).autocomplete({
source: getItems
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( '<table></table>' )
    .data( "item.autocomplete", item )
    .append( '<tr><td>' + item.keyword + '</td><td> ' + item.value + "</td></tr>" )
    .appendTo( ul );
};

Answer 1

我认为这可以帮助你,这里是js:

$(function() {
//overriding jquery-ui.autocomplete .js functions
$.ui.autocomplete.prototype._renderMenu = function(ul, items) {
  var self = this;
  //table definitions
  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._renderItemData(ul, ul.find("table tbody"), item );
  });
};
$.ui.autocomplete.prototype._renderItemData = function(ul,table, item) {
  return this._renderItem( table, item ).data( "ui-autocomplete-item", item );
};
$.ui.autocomplete.prototype._renderItem = function(table, item) {
  return $( "<tr class='ui-menu-item' role='presentation'></tr>" )
    .data( "item.autocomplete", item )
    .append( "<td >"+item.id+"</td>"+"<td>"+item.value+"</td>"+"<td>"+item.cp+"</td>" )
    .appendTo( table );
};
//random json values
var projects = [
    {id:1,value:"Thomas",cp:134},
    {id:65,value:"Richard",cp:1743},
    {id:235,value:"Harold",cp:7342},
    {id:78,value:"Santa Maria",cp:787},
    {id:75,value:"Gunner",cp:788},
    {id:124,value:"Shad",cp:124},
    {id:1233,value:"Aziz",cp:3544},
    {id:244,value:"Buet",cp:7847}
];
$( "#project" ).autocomplete({
    minLength: 1,
    source: projects,
    //you can write for select too
    focus: function( event, ui ) {
        //console.log(ui.item.value);
        $( "#project" ).val( ui.item.value );
        $( "#project-id" ).val( ui.item.id );
        $( "#project-description" ).html( ui.item.cp );
        return false;
    }
})
});

你可以看看这个小提琴