11

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?

Improve this question

3 Answers 3

Reset to default
21

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

9

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.

Improve this answer

Comments

2

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 );
};
Improve this answer

2 Comments

Hi Manish. Ty for your answer. My Problem is not the css-styling but the template of the autocomplete entries. I want to modify the actual html code of the rendered items so that it has an additional element.
for that you can first do an ajax call to the provide source url above, collect the data you want to provide to the autocomplete and just edit it (append your own items) and then supply it to the autocomplete source.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.