Catcomplete widget stopped working when updating jQuery UI from 1.8 to 1.12

Question

This is my code, which has been working fine, until I updated to jQuery UI 1.12

var currentCategory = "";
$.widget("custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function (ul, items) {
        var self = this;
        $.each(items, function (index, item) {
            if (item.category != currentCategory) {
                ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                currentCategory = item.category;
            }
            self._renderItem(ul, item);
        });
    },
    _renderItem: function (ul, item) {
        var clase = '';
        switch (item.category) {
        case 'Usuarios':
            return $("<li class='" + clase + "'></li>")
                .data("item.autocomplete", item)
                .append("<a><img src='" + item.img + "' /><span class='name'>" + item.value + "</span></a>")
                .appendTo(ul);
            break;
        case 'Posts':
            return $("<li class='" + clase + "'></li>")
                .data("item.autocomplete", item)
                .append("<a><img src='" + item.img + "' /><span class='name'>" + item.value + "</span><span class='sub'><i class='fa fa-bookmark-o'></i> " + item.sub + "</span> <span class='sub'>" + item.votos + "<i class='fa fa-thumbs-o-up'></i></span> </a>")
                .appendTo(ul);
            break;
        }
    }
});

And this is how I use it:

$("#recipeName").catcomplete({
        source: "/jsonR.php",
        minLength: 2,
        selectFirst: true,
        select: function (event, ui) {
            console.log(ui); /* this logs Object item:undefined */
            var url = '';
            if (ui.item.category == 'Posts') {  /* This is line 1692 */
                url = 'http://example.com/page.php?id=' + ui.item.id;
            }
            location.href = url;
            return false;
        },
        selectFirst: true,
        open: function () {
            $('.ui-autocomplete').addClass('searchBox');
            currentCategory = "";
        }
    });

This code renders properly the list, the problem is when I select one option:

cached.js:1692 Uncaught TypeError: Cannot read property 'category' of undefined(…)

Any idea what should I re-adapt from this code in order to work with jquery ui 1.12?

-EDIT-

I noticed that if using self._renderItemData(ul, item) instead of self._renderItem(ul, item), the selection works,

The problem is that I get a error when I hover an element (and the cursor it's not pointer..):

jquery-ui.js:5840 Uncaught TypeError: Cannot read property 'value' of undefined(…)

this is the line 5840 on jquery ui:

// Announce the value in the liveRegion
label = ui.item.attr( "aria-label" ) || item.value;

Any thoughts?

Answer 1

I was missing the _create method, which I am not sure if it was necessary in older versions

$.widget("custom.catcomplete", $.ui.autocomplete, {
   _create: function() {
            this._super();
            this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
    }
    // Rest of code..
});