Cant override jQuery UI autocomplete renderItem method multiple times

Question

It overrides properly in the first autocomplete found, but do nothing with the rest. Instead it loads the original _renderitem method that you can see at https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js#L449.

$(".someClassWithMultipleItemsOnDOM").autocomplete({
        delay:500,
        minLength:2,
        source:path"
        .....   
}).data( "autocomplete" )._renderItem = function( ul, item ) {

thanks in advance

Savagism

Answer 1

There's a workaround for this problem:

var autoc = {
    delay: 500,
    minLength: 2,
    source: path,
    .....   
};

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

$(".someClassWithMultipleItemsOnDOM").each(function (i) {
     $(this).autocomplete(autoc).data("autocomplete")._renderItem = renderItem;
}

Funiculate

It's a JavaScript Object Literal. Obviously you'd have to get rid of the '....' and the last comma for this example to work. – Funiculate

@Funiculate - you just saved me HOURS of extra work. Do the jquery-ui folks now that a workaround is needed for multiple autocomplete elements? – Jackstraw

Answer 2

You can override _renderItem

$.ui.autocomplete.prototype._renderItem = function (ul, item) { ... };

Angi

It is recommended to do that way? – Caliber

It's a way to do it. Neither recommended nor not recommended. – Angi