Reputation: 99
I have an autocomplete that is calling a service to filter a list based on parameters to the autocomplete. Upon entering the page, I am receving the error 'cannot set property "_renderItem" of undefined'. I see this used elsewhere without issues. Unsure of what is wrong.
Attempting to refactor without any real progress.
$(this).autocomplete({
source: function (request, response) {
app.ajax({
values: {
searchDesc: request.term,
codeSet: filter.codeSet
},
url: 'Services/Workflow.svc/GetLOCsWCodeSetList',
indicatorId: c.SILENTAJAXINDICATOR
}).done(function (data, status, jqXhr) {
var tablesData = [];
tablesData = $.map(data.d, function (item) {
return { label: item.Description, value: item.Description, Key: item.ID, ProcedureCode: item.ProcedureCode };
});
response(tablesData);
});
},
minLength: 3,
change: changeEvent,
select: selectEvent
}).autocomplete('instance')._renderItem = function (ul, item) {
let _aitem = item.label;
if (_aitem.indexOf('refine entry') > -1) {
_aitem = '<div class="ac-moreres"><b>' + _aitem + "</b></div>";
} else {
_aitem = '<div class="ui-menu-item-wrapper">' + _aitem + '</div>';
}
return $("<li>")
.data("item.autocomplete", item)
.append(_aitem)
.appendTo(ul);
};
};
The autocomplete works after the initial page load but upon any refreshes of the page without any data, I get the original error again.
How do I prevent the 'undefined' error from appearing?
Upvotes: 0
Views: 212
Reputation: 99
I was able to fix the error on my own.
$.fn.locwithProcCodeLookup = function (filter, selectEvent, changeEvent) {
$(this).autocomplete({
source: function (request, response) {
app.ajax({
values: {
searchDesc: request.term,
codeSet: filter.codeSet
},
url: 'Services/Workflow.svc/GetLOCsWCodeSetList',
indicatorId: c.SILENTAJAXINDICATOR
}).done(function (data, status, jqXhr) {
var tablesData = [];
tablesData = $.map(data.d, function (item) {
return { label: item.Description, value: item.Description, Key: item.ID, ProcedureCode: item.ProcedureCode };
});
response(tablesData);
});
},
minLength: 3,
change: changeEvent,
select: selectEvent,
_create: function () {
this._super();
this.widget().menu("option", "items", "> :not(.ui-widget-header)");
},
_renderMenu: function (ul, items) {
var self = this,
thead;
if (this.options.showHeader) {
table = $('<div class="ui-widget-header" style="width:100%"></div>');
$.each(this.options.columns, function (index, item) {
var _style = item.style ? item.style : '';
table.append('<span style="padding:0 4px;float:left;width:' + item.width + ';' + _style + '">' + item.name + '</span>');
});
table.append('<div style="clear: both;"></div>');
ul.append(table);
}
$.each(items, function (index, item) {
self._renderItem(ul, item);
});
$(ul).find("li:odd").addClass("odd");
$(ul).addClass('ulmca');
},
_renderItem: function (ul, item) {
let _aitem = item.label;
if (_aitem.indexOf('refine entry') > -1) {
_aitem = '<div class="ac-moreres"><b>' + _aitem + "</b></div>";
} else {
_aitem = '<div class="ui-menu-item-wrapper">' + _aitem + '</div>';
}
return $("<li>")
.data("item.autocomplete", item)
.append(_aitem)
.appendTo(ul);
}
});
};
Upvotes: 1