我正在使用
JQuery UI的自动完成功能.我有许多值,以及一小组关键字,其中一个分配给每个值.我想在迷你表中显示每一对,关键字在一个单元格中,值在另一个单元格中.为此,我正在覆盖_renderItem,如
the documentation中所述.但是,当我这样做时,单击一个值(或关键字)实际上并没有做任何事情,所以我不能选择任何值.我怀疑它与数据(“item.autocomplete”,item)不在正确的位置有关.或者我可能需要覆盖更高的其他功能(_renderMenuor _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 );
};
解决方法
我认为这可以帮助你,这里是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 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;
}
})
});
你可以查看这个fiddle
