我使用了组合框演示中的一些代码，现在我尝试将一些类添加到列表项、_renderItem 和 _renderMenu，但没有效果。
代码(有一些不相关的行，以确保我不会错过任何内容)
this.input = $("<input>")
.appendTo(this.wrapper)
.val(value)
.attr("title", "")
.addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
.autocomplete({
autoFocus: true,
response: function (event, ui) {
if (ui.content.length == 0) {
ui.content.push({
label: "new value: " + $(this).val(),
value: $(this).val(),
id: 0
});
}
},
_renderItem: function (ul, item) {
return $("<li>")
.addClass("Please work")
.attr("data-value", item.value)
.append(item.label)
.appendTo(ul);
},
_renderMenu: function (ul, items) {
var that = this;
$.each(items, function (index, item) {
that._renderItemData(ul, item);
});
$(ul).find("li:odd").addClass("odd");
},
delay: 0,
minLength: 0,
source: $.proxy(this, "_source")
})
.tooltip({
tooltipClass: "ui-state-highlight"
});
最佳答案
我从来没有以这种方式使用过扩展，而且我不能说为什么它不起作用(我想它应该起作用)。
无论如何，尝试使用标准方式，在 create 回调上:
this.input = $("<input>")
.appendTo(this.wrapper)
.val(value)
.attr("title", "")
.addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
.autocomplete({
autoFocus: true,
response: function (event, ui) {
if (ui.content.length == 0) {
ui.content.push({
label: "new value: " + $(this).val(),
value: $(this).val(),
id: 0
});
}
},
delay: 0,
minLength: 0,
source: $.proxy(this, "_source"),
create: function() {
$(this).data('ui-autocomplete')._renderItem = function (ul, item) {
return $("<li>")
.addClass("Please work")
.attr("data-value", item.value)
.append(item.label)
.appendTo(ul);
};
}
})
.tooltip({
tooltipClass: "ui-state-highlight"
});
看到这个FIDDLE
关于jQuery UI 自定义自动完成 - `_renderItem` 和 `_renderMenu` 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37045318/