jQuery UI AutoComplete ui.item is undefined

Question

A jsfiddle of this code can be found here. Pretty basic code. I just want an autocomplete list for the list of sites in the Stack Exchange network with their favicon. The source function works fine. I can type in sta and see the matches. If I hover over them or select one, but the focus and select functions report that ui.item is undefined. Note that the javascript code has console statements in it. View your console and you'll see it reporting undefined as you hover over the matches.

Most of the suggestions I've found deal with pulling the source from json that comes from a remote source and there being problems with the json formatting. That isn't my issue here though as I'm creating the array myself. I've verified that the array of matches I pass to the response callback is correct.

Can anyone spot what is surely a silly mistake on my part?

Here's the html

<select id="sites" name="sites">
    <option value="http://stackoverflow.com"&gt;Stack Overflow</option>
    <option value="http://serverfault.com"&gt;Server Fault</option>
    <option value="http://meta.stackoverflow.com"&gt;Meta Stack Overflow</option>
    <option value="http://superuser.com"&gt;Super User</option>
    <option value="http://stackapps.com"&gt;Stack Apps</option>
    <option value="http://webapps.stackexchange.com"&gt;Web Applications</option>
    <option value="http://gaming.stackexchange.com"&gt;Gaming&lt;/option&gt;
    <option value="http://webmasters.stackexchange.com"&gt;Webmasters&lt;/option&gt;
    <option value="http://cooking.stackexchange.com"&gt;Cooking&lt;/option&gt;
    <option value="http://gamedev.stackexchange.com"&gt;Game Developers</option>
    <option value="http://photo.stackexchange.com"&gt;Photography&lt;/option&gt;
    <option value="http://stats.stackexchange.com"&gt;Statistical Analysis</option>
    <option value="http://math.stackexchange.com"&gt;Mathematics&lt;/option&gt;
    <option value="http://diy.stackexchange.com"&gt;Home Improvement</option>
    <option value="http://gis.stackexchange.com"&gt;GIS&lt;/option&gt;
    <option value="http://tex.stackexchange.com"&gt;TeX - LaTeX</option>
    <option value="http://askubuntu.com"&gt;Ubuntu&lt;/option&gt;
    <option value="http://money.stackexchange.com"&gt;Personal Finance and Money</option>
    <option value="http://english.stackexchange.com"&gt;English Language and Usage</option>
    <option value="http://ui.stackexchange.com"&gt;User Interface</option>
    <option value="http://unix.stackexchange.com"&gt;Unix and Linux</option>
    <option value="http://wordpress.stackexchange.com"&gt;WordPress&lt;/option&gt;
    <option value="http://cstheory.stackexchange.com"&gt;Theoretical Computer Science</option>
    <option value="http://apple.stackexchange.com"&gt;Apple&lt;/option&gt;
    <option value="http://rpg.stackexchange.com"&gt;Role-playing Games</option>
    <option value="http://bicycles.stackexchange.com"&gt;Bicycles&lt;/option&gt;
    <option value="http://programmers.stackexchange.com"&gt;Programmers&lt;/option&gt;
    <option value="http://android.stackexchange.com"&gt;Android Enthusiasts</option>
    <option value="http://answers.onstartups.com"&gt;OnStartups&lt;/option&gt;
    <option value="http://electronics.stackexchange.com"&gt;Electronics and Robotics</option>
</select>

And here's the javascript.

var options = [];
var siteList = $("#sites");
siteList.children("option").each(function (i) {
    var li = {};
    li.label = $(this).text();
    li.value = $(this).val();
    options.push(li);
});
$('<input id="sites" name="sites" type="text" />').replaceAll(siteList).autocomplete({
    minLength:0,
    source:function(request,response) {
        var test = new RegExp('\\b' + $.trim(request.term),'i');
        var current = [];
        $.each(options,function(i,o) {
            if (o.label.match(test)) {
                current.push(o);
            }
        });
        response(current);
    },
    focus:function(event,ui) {
    console.log(typeof item);
    console.dir(ui);
        $("#sites").val(ui.item.label);
        return false;
    },
    select:function(event,ui) {
        $("#sites").val(ui.item.label);
        return false;
    },
}).data("autocomplete")._renderItem = function(ul, item) {
    var img = $("<img>").attr({"src":item.value + "/favicon.ico", "alt":item.label});
    var a = $("<a></a>").append(img).append(item.label);
    return $("<li></li>").data("item.automcomplete",item).append(a).appendTo(ul);
};​
​

Answer 1

I fully spotted this. Nothing to do with Tim.

return $("<li></li>").data("item.automcomplete",item).append(a).appendTo(ul);

Should be

return $("<li></li>").data("item.autocomplete",item).append(a).appendTo(ul);

Answer 2

The problem lies in your _renderItem function:

return $("<li></li>").data("item.automcomplete",item).append(a).appendTo(ul);
                                 //  ^-- minor typo

Removing the extraneous m should fix your problems.