尝试使用自定义_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);