我正在使用带有自动完成工具的 jQueryUI (1.10.2) 和 jQuery (1.9.1)。
我有远程 json 数据和类别以及自定义显示，其中包含 json 数据中每个项目的图像（显示在自动完成列表中）。
这是我的自动完成初始化
var autoSearch = $("#header-search-text").autocomplete({
source: function( request, response ) {
$.ajax({
//I have items with label, value, category and imgPath info
});
},
focus: function( event, ui ) {
console.log("focus is ");
//This line shows "null"
console.log(ui);
return false;
},
minLength: 4,
select: function( event, ui ) {
//Never shows up
console.log("selected is ");
console.log( ui.item);/* ?
"Selected: " + ui.item.label :
"Nothing selected, input was " + this.value);*/
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
}).data('ui-autocomplete');
我有一个自定义的 _renderMenu
//Working
autoSearch._renderMenu = function( ul, items ) {
var that = this,
currentCategory = "";
$.each( items, function( index, item ) {
console.log(item);
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
that._renderItem( ul, item );
});
};
但是当我有 _renderItem 时，用于选择的键（向上和向下）不再起作用，我无法点击任何东西（没有：悬停 CSS 出现）
autoSearch._renderItem = function(ul, item) {
console.log("ul is ");
console.log(ul);
return $('<li>')
.data('item.autocomplete', item)
.append('<img style="width:50px;height:50px;" src="' + base_url + "/"+ item.imgPath + '" alt="" />' + item.label)
.appendTo(ul);
};