jQuery UI Autocomplete Combobox _renderItem返回" TypeError:Item未定义"

时间:2015-05-25 04:41:46

标签: jquery jquery-ui jquery-ui-autocomplete

尝试使用自定义_renderItem时,我会在TypeError: item is undefined收到错误.append(item.label)。这是使用jQueryUI 1.11.4。我不确定为什么会这样。从我搜索和阅读的所有内容中,这应该可行。

(function($) {
    $.widget("custom.combobox", {
        _create: function() {
            this.wrapper = $("<span>")
                .addClass("custom-combobox")
                .insertAfter(this.element);
            this.element.hide();
            this._createAutocomplete();
            this._createShowAllButton();
        },

        _createAutocomplete: function() {
            var selected = this.element.children(":selected");
            var value = selected.val() ? selected.text().trim() : "";
            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({
                    delay: 0,
                    minLength: 0,
                    source: $.proxy(this, "_source")
                })
                .tooltip({ tooltipClass: "ui-state-highlight" })
                .data("ui-autocomplete")._renderItem = function(ul, item) {
                    return $("<li></li>")
                        .data("ui-autocomplete", item)
                        .append(item.label)
                        .appendTo(ul);
                }
            this._on(this.input, {
                autocompleteselect: function(event, ui) {
                    ui.item.option.selected = true;
                    this._trigger("select", event, { item: ui.item.option });
                },
                autocompletechange: "_removeIfInvalid"
            });
        },
        _createShowAllButton: function() {
            var input = this.input;
            var wasOpen = false;

            $("<a>")
                .attr("tabIndex", -1)
                .appendTo(this.wrapper)
                .button({
                    icons: { primary: "ui-icon-triangle-1-s" },
                    text: false
                })
                .removeClass("ui-corner-all")
                .addClass("ui-corner-right ui-button-icon")
                .mousedown(function() { wasOpen = input.autocomplete("widget").is(":visible"); })
                .click(function() {
                    if (wasOpen) {
                        return;
                    }
                    $(this).blur();
                    input.autocomplete("search", "");
                    input.focus();

        _source: function(request, response) {
            var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );

            response(this.element.children("option").map(function() {
                var text = $(this).text();

                if (this.value && (! request.term || matcher.test(text))) {
                    return {
                        label: text,
                        value: text,
                        option: this
                    };
                }
            }));
        },

        _removeIfInvalid: function( event, ui ) {
            if (ui.item) {
                return;
            }

            var value = this.input.val();
            var valueLowerCase = value.toLowerCase();
            var valid = false;

            this.element.children("option").each(function() {
                if ($(this).text().toLowerCase() === valueLowerCase ) {
                    this.selected = valid = true;
                    return false;
                }
            });

            if (valid) {
                return;
            }

            this.input.val("").tooltip("open");
            this.element.val("");
            this._delay(function() { this.input.tooltip("close").attr("title", ""); }, 2500);
            this.input.autocomplete("instance").term = "";
        },

        _destroy: function() {
            this.wrapper.remove();
            this.element.show();
        }
    })
})(jQuery);

0 个答案:

没有答案