jQuery UI自定义AutoComplete

jQuery UI自定义AutoComplete - `_renderItem`和`_renderMenu`无法正常工作(jQuery UI custom AutoComplete - `_renderItem` and `_renderMenu` not working)

我已经使用了一些来自组合框演示的代码，现在我试图将一些类添加到list-items，_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" });

I've used some code from a combobox demo, and now that i am trying to add some classes to the list-items, the _renderItem and _renderMenu, has no effect.

the code (with some irrelevant lines, to make sure that i miss nothing)

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" });

最满意答案

我从来没有以这种方式使用扩展，我不能说为什么它不起作用（它应该，我想）。

无论如何，尝试使用标准方式，在创建回调时：

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

i've never used extensions in that way, and i can't say why it isn't working (it should, i suppose).

Anyway, try with the standard way, on create callback:

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" });

see this FIDDLE