jQuery UI自定义自动完成-_renderItem和_renderMenu不起作用 [英] jQuery UI custom AutoComplete - `_renderItem` and `_renderMenu` not working

问题描述

我已经使用了组合框演示中的一些代码，现在，我试图将一些类添加到_renderItem和_renderMenu列表项中，这将无效.

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

推荐答案

我从来没有以这种方式使用扩展，而且我不能说为什么它不起作用(我想应该如此).

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

请参见 FIDDLE

这篇关于jQuery UI自定义自动完成-_renderItem和_renderMenu不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！