Jquery UI multicolumn autocomplete change event is not triggered - jquery-ui

Question

I am using jquery-ui autocomplete with multicolumn using _renderMenu and _renderItem as per jsfiddle
$.widget('custom.mcautocomplete', $.ui.autocomplete, {
_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) {
table.append('<span style="padding:0 4px;float:left;width:' + item.width + ';">' + item.name + '</span>');
});
table.append('<div style="clear: both;"></div>');
ul.append(table);
}
$.each(items, function(index, item) {
self._renderItem(ul, item);
});
},
_renderItem: function(ul, item) {
var t = '',
result = '';
$.each(this.options.columns, function(index, column) {
t += '<span style="padding:0 4px;float:left;width:' + column.width + ';">' + item[column.valueField ? column.valueField : index] + '</span>'
});
result = $('<li></li>').data('item.autocomplete', item).append('<a class="mcacAnchor">' + t + '<div style="clear: both;"></div></a>').appendTo(ul);
return result;
}
});
Change event is triggered if I click outside of autocomplete without selecting any result.
But change event is not triggered when clicking on header(column) and then clicking on outside.
Thanks in advance

Answer 1

I managed to fix the problem, jquery changed the key by which autocomplete saves the item data from 'item.autocomplete' to 'ui-autocomplete-item' so the fix is to change your line:
result = $('<li></li>').data('item.autocomplete', item).append('<a class="mcacAnchor">' + t + '<div style="clear: both;"></div></a>').appendTo(ul);
to
result = $('<li></li>').data('ui-autocomplete-item', item).append('<a class="mcacAnchor">' + t + '<div style="clear: both;"></div></a>').appendTo(ul);
Here is a working jsfiddle using jquery 1.10