Autcomplete-自定义renderItem /菜单和项目选择问题

Question

I am using jQueryUI (1.10.2) and jQuery (1.9.1) with the autocomplete tool.

I have remote json data AND categories AND custom display with an image for each item from the json data (showed in the autocomplete list).

This is my autocomplete init

var autoSearch = $("#header-search-text").autocomplete({
    source: function( request, response ) {
        $.ajax({
            //I have items with label, value, category and imgPath info
        });
    },
     focus: function( event, ui ) {
        console.log("focus is ");
        //This line shows "null"
        console.log(ui);
        return false;
    },
    minLength: 4,
    select: function( event, ui ) {
        //Never shows up
        console.log("selected is ");
        console.log( ui.item);/* ?
        "Selected: " + ui.item.label :
        "Nothing selected, input was " + this.value);*/
    },
    open: function() {
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
    },
    close: function() {
        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
    }
}).data('ui-autocomplete');

I have a custom _renderMenu

//Working
autoSearch._renderMenu = function( ul, items ) {
        var that = this,
        currentCategory = "";
        $.each( items, function( index, item ) {
            console.log(item);
            if ( item.category != currentCategory ) {
                ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                currentCategory = item.category;
            }
            that._renderItem( ul, item );
        });
};

But when I had the _renderItem, the keys (up and down) for selection doesn't work anymore and I cannot click on anything (no :hover CSS showing up)

autoSearch._renderItem = function(ul, item) {
    console.log("ul is ");
    console.log(ul);
    return $('<li>')
        .data('item.autocomplete', item)
        .append('<img style="width:50px;height:50px;" src="' + base_url + "/"+ item.imgPath + '" alt="" />' + item.label)
        .appendTo(ul);
};

Answer 1

Ok, I checked the HTML and I was obviously missing this line in the _renderItem :

 //Before the appendTo(ul);
.append( $( "<a>" ).text( item.label ) )

I don't know why nor how but by adding an , jQuery generates a bunch of attributes like

id="ui-id-7" class="ui-corner-all" tabindex="-1"