Jquery autocomplete resulting in '_renderItem' of undefined error

Question

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?

Answer 1

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