Customize autocomplete display in jQuery UI 1.8

Question

I'm trying to customize the look of the autocomplete elements in JQuery 1.8. I used the example from the JQuery UI website

$('#term').autocomplete(
    {source:'index.php?/Ajax/SearchUsers', minLength: 3, delay: 300}
).data("ui-autocomplete")._renderItem = function( ul, item ) {
    return $( "<li>" )
           .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
           .appendTo( ul );
};

Unfortunately in JQuery UI 1.8 there is no ui-autocomplete data field. Where can I modify the template for the auto-complete in JQuery UI 1.8?

Answer 1

The example in the jQuery UI site is based on jQuery UI 1.10, jQuery UI 1.8 is a bit different so you have to change the code to let it works.

The main differences are here:

.data("autocomplete")._renderItem = function (ul, item) {
        return $("<li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.label + "<br>" + item.desc + "</a>")
            .appendTo(ul);

The data("ui-autocomplete") must be data("autocomplete") and you have to set the data attribute to add your additional info to the autocomplete.

Code:

$("#project").autocomplete({
    minLength: 0,
    source: projects,
    focus: function (event, ui) {
        $("#project").val(ui.item.label);
        return false;
    },
    select: function (event, ui) {
        $("#project").val(ui.item.label);
        $("#project-id").val(ui.item.value);
        $("#project-description").html(ui.item.desc);
        $("#project-icon").attr("src", "images/" + ui.item.icon);

        return false;
    }
})
    .data("autocomplete")._renderItem = function (ul, item) {
    return $("<li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.label + "<br>" + item.desc + "</a>")
        .appendTo(ul);
};

Demo: http://jsfiddle.net/IrvinDominin/zvGKw/

Answer 2

I've had to make a plugin/widget that utilize Autocomplete and ran in to the same problem. I investigated $(...).data() which ofcourse reveal that different versions of jQuery UI store data in .data() with different keys.

According to the Upgrade Guide for 1.9 (http://jqueryui.com/upgrade-guide/1.9/#changed-naming-convention-for-data-keys)

Autocomplete now uses ui-autocomplete-item instead of item.autocomplete ... Some of these were purely internal, and some were useful to users. The ones that were useful to users, specifically the widget instances and autocomplete items, still support the old names, though they are now deprecated.

So when I had to "override" the _renderItem-extensionpoint, with respect to UI-version, this is what I did:

if ($input.data("autocomplete") !== undefined) {
    $input.data("autocomplete")._renderItem = options._renderItem;
} else ($input.data("ui-autocomplete") !== undefined) {
    $input.data("ui-autocomplete")._renderItem = options._renderItem;
} else {
    // fail fast, fail here!
}

This is as close as I could get to feature-detection.

Answer 3

In the open function, you can use css to modify the look of the your suggestion like this:

open: function() {
    $('.ui-autocomplete').width('auto');
    $('.ui-widget-content').css('background', '#E1F7DE');
    $('.ui-menu-item a').removeClass('customClass');
}

so in your case it should be like this

$('#term').autocomplete(
    {
        source:'index.php?/Ajax/SearchUsers', 
        minLength: 3, 
        delay: 300,
        open: function() {
            $('.ui-autocomplete').width('auto');
            $('.ui-widget-content').css('background', '#E1F7DE');
            $('.ui-menu-item a').removeClass('ui-corner-all');
        }

    }
).data("ui-autocomplete")._renderItem = function( ul, item ) {
    return $( "<li>" )
       .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
       .appendTo( ul );
};