As a newb to jQuery im wondering if its possible to have both jQuery _renderItem (for custom list item HTML/CSS) AND the categories working together in harmony?

Ive got my _renderItem working great but I have no idea how to incorporate categories into the mix.

My code so far

$(document).ready(function () {
$(':input[data-autocomplete]').each(function () {
    $(':input[data-autocomplete]').autocomplete({
        source: $(this).attr("data-autocomplete")
    }).data("autocomplete")._renderItem = function (ul, item) {
        var MyHtml = "<a>" + "<div class='ac' >" +                        
                     "<div class='ac_img_wrap' >" +
                     '<img src="../../uploads/' + item.imageUrl + '.jpg"' + 'width="40" height="40" />' +
                     "</div>" +
                     "<div class='ac_mid' >" +
                     "<div class='ac_name' >" + item.value + "</div>" +
                     "<div class='ac_info' >" + item.info + "</div>" +
                     "</div>" +
                     "</div>" + "</a>";
        return $("<li></li>").data("item.autocomplete", item).append(MyHtml).appendTo(ul);
    };
});
});

The jQuery documentation for the autocomplete gives the following code example :

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

Id like to get my custom HTML (_renderItem) and categories working together, can anyone help me to merge these two together or point me in the right direction. Thanks