jquery autocomplete focus event item undefined

Question

So I am building a custom autocomplete box , where an array of local data that looks like this is the data source:

{
            label: "joe",
            category: "people"
}

I have customised the rendermenu function to enable categories in the menu like so :

 $.widget("custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function(ul, items) {
        var self = this,
            currentCategory = "";
        $.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);
        });
    }
});

and I am initialising everything is done by :

 $("#search").catcomplete(getConfig(all));

where getConfig is :

function getConfig(data) {
// autocomplete box configuration for searchbars

return {
    delay: 0,
    source: function (request, response) {
        var prune = request.term,
            arr = prune.split(":");

        if (arr.length > 2) {
            response();
        } else {
            response($.ui.autocomplete.filter(data, arr[arr.length - 1]));
        }
    },
    select: function (e, ui) {
        e.preventDefault();
        addBit(ui.item);
        e.originalEvent.stopPropagation();
    },
    focus: function (e, ui) {
        //console.log(e);
        //e.preventDefault();
        //console.log(ui);
        //$('ul.autocomplete li#floatinput input#search').val(ui.item.category + ":" + ui.item.label);
    },
    position: {
        my: "left top",
        at: "left bottom",
        of: $("ul.autocomplete"),
        collision: "flip flip"
    }
}
}

Yet somehow the focus event doesn't have item defined. I tried getting rid of the focus function alltogether , only to get : Uncaught TypeError: Cannot read property 'value' of undefined . which means event the default behaviour doesn't work.

Any suggestions welcome!

Here's a fiddle i made to help illustrate > http://jsfiddle.net/ahTCW/3/

Answer 1

Use _renderItemData and not _renderItem with jQueryUI >= 1.9:

// getconfig
$.widget("custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function(ul, items) {
        var self = this,
            currentCategory = "";
        $.each(items, function(index, item) {
            if (item.category != currentCategory) {
                ul.append("<li style='clear:both'class='ui-autocomplete-category'>" + item.category + "</li>");
                currentCategory = item.category;
            }
            self._renderItemData(ul, item);
        });
    }
});

You have another error occurring:

Uncaught TypeError: Cannot read property 'nodeType' of undefined

This one is caused by the option you're passing to the of property of the position object. ul.autocomplete doesn't exist on the page when the autocomplete widget is instantiated.

Updated example: http://jsfiddle.net/kHNS5/