jQuery UI Autocomplete Combobox _renderItem returns “TypeError: Item is undefined”
When attempting to use a custom _renderItem, I keep receiving the error
TypeError: item is undefined at
.append(item.label) . This is using jQueryUI 1.11.4. I'm not sure why this is happening. From everything I've searched and read, this should work. Any help would be greatly appreciated.
- (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);