JQueryUI autocomplete - custom rendering; focus not working

Question

I'm using Jquery-ui version 1.10.3 with jQuery 1.8.3 and trying to implement a custom display of data fetched by the autocomplete server fetch:

This is the part that does the rendering override:

$(#"...").autocomplete(...)
 .data( "ui-autocomplete")._renderItemData = function( ul, item : Users.BriefUserDescriptor) {
    ul.data('ui-autocomplete-item', item);
    return $( "<li>" )
        .data('ui-autocomplete-item', item )
        .append( "<p>" + item.fullName + "<br>" + item.emailAddress+ "</p>" )
        .appendTo( ul );
};

This works. The elements are displayed as I want them to be, except for a problem regarding the focus:

focus: function( event, ui) {
            var currentUser : Users.BriefUserDescriptor = ui.item;
            $("#invitePersonInput" ).val(currentUser.fullName);
            return false;
        },

This always triggers an error, namely that currentUser (ui.item) is undefined.

I've tried several combinations of 'ui-autocomplete-item', 'uiAutocomplete', etc, but none has worked so far in this regard, some even failed to do the menu fill-in altogether.

Any hint would be great.

Answer 1

Ok, finally found the problem. It is necessary to add a 'ui-menu-item' class on the

element, otherwise JQuery cannot properly select and hand over the item to the handler functions.

Overriding renderItem instead of renderItemData also seems the right way to do it.

It should look something like:

$(#"...").autocomplete(...)
 .data( "ui-autocomplete")._renderItemData = function( ul, item : Users.BriefUserDescriptor) {
    ul.data('ui-autocomplete-item', item);
    return $( "<li>" )
        .data('ui-autocomplete-item', item )
        .append( "<p>" + item.fullName + "<br>" + item.emailAddress+ "</p>" )
        .addClass('ui-menu-item')
        .appendTo( ul );
};

Answer 2

Thanks for this information it helped me clear up a similar issue with my ui being undefined. The issue for me was in the

_renderItem: function (ul, item, url) {
        return $('<li>')
            .data('item.autocomplete', url)

to

_renderItem: function (ul, item, url) {
        return $('<li>')
            .data('ui-autocomplete-item', url) 

I was converting a jquery 1.9.1 script to a jquery-ui 1.10.4 variation.