1
我使用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);
};