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