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
更多推荐
发布评论