jQuery UI 自定义自动完成 - `_renderItem` 和 `_renderMenu` 不工作
jQuery UI custom AutoComplete - `_renderItem` and `_renderMenu` not working
我使用了组合框演示中的一些代码,现在我正尝试向列表项添加一些 类,_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
我使用了组合框演示中的一些代码,现在我正尝试向列表项添加一些 类,_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