overriding _rendermenu in jquery autocomplete throws js error - jquery-ui

Question

I tried to override _rendermenu in jquery autocomplete. The list is getting generated but every time I hover over the results i get the following js error
Uncaught TypeError: Cannot read property 'value' of undefined in jquery-ui.js
the code used is
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme",
"AA",
"BB",
"CC",
"DD",
"EE",
"FF",
"GG",
"HH",
"II",
"JJ",
"KK"
];
var atComplete=$( "#autoCompleteText" ).autocomplete({
delay:0,
source:availableTags,
autoFocus: true,
minLength: 0,
appendTo: "#result"
}).focus(function () {
$(this).autocomplete("search");
}).data('ui-autocomplete');
atComplete._renderMenu = function( ul, items ) {
var that = this;
$.each( items, function( index, item ) {
that._renderItem( ul, item );
});
};
atComplete._renderItem = function(ul, item) {
console.log("item in render item:",item);
return $("<li>").data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul);
};
});

Answer 1

If you look at the API docs for _renderMenu you'll see the reason you're getting an error:
Creation of the individual <li> elements should be delegated to _renderItemData(), which in turn delegates to the _renderItem() extension point.
You're using renderItem() directly. This means that you're not actually binding item data to the .data('ui-autocomplete-item') cache, which the widget attempts to read when drawing the menu -- but since it's undefined, the page is throwing an error.
To fix it all you need to do is change the call to _renderItem to call _renderItemData instead:
atComplete._renderMenu = function( ul, items ) {
var that = this;
$.each( items, function( index, item ) {
that._renderItemData( ul, item );
});
};