Question

I am trying to use jquery autocomplete and custom html to add a image in my dropdown. for some reason, when I set up the image, the autocomplete looks fine when I enter a name (I see the picture and the label just fine), but when I arrow down to select, i get an error that says ui.item is not defined for focus and select events. If I follow that standard format shown in the example page, everything works fine.

(the one from the jquery doc – works as expected)

.append( "<a>" + item.label + "<br>" + item.value + "</a>" )  

but when I use this one to show an image, the autocomplete lists shows with pics, but the focus and select events dont work

$( "#friends" ).autocomplete({
    minLength: 2,
    source: friend_data,
    delay: 0,
    autofocus: true,
    focus: function(event, ui) {
        $( "#friends" ).val( ui.item.label );
        return false;
        },
    select: function( event, ui ) {
        $( "#friends" ).val( ui.item.label );
        return false;
        }    
    })
    .data( "autocomplete")._renderItem = function( ul, item ) {
        var fb_pic_path = '<img src="http://graph.facebook.com/' + item.value + '/picture?type=square">' ;
        console.log(fb_pic_path);
        return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append(  fb_pic_path +  item.label  )
        .appendTo( ul );
    };

Answer 1

ah.. figured it out. needs the anchor.

.append( "<a>" + fb_pic_path + item.label + "</a>" )

and it works fine now.