How to patch just one instance of Autocomplete on a page?

Question

This answer -- jQueryUI: how can I custom-format the Autocomplete plug-in results? -- describes how to monkeypatch the jqueryUI autocomplete widget, so that it displays things in a particular way. The approach it uses is to replace a function on the $.ui.autocomplete.prototype.

This means that all autocomplete widgets will get this patch.

Is there a way to patch the autocomplete widget for just one input element? What is it?

When I examine $('$input').autocomplete , I don't see any of the autocomplete fns there (_renderItem, _renderMenu, _search, etc).

score 26 · Accepted Answer · answered May 28 '11 at 22:04

26

Check out the custom data and display demo. This demo is not modifying the prototype object of the autocomplete widget, meaning that only that instance of the widget is effected:

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

Here's a working demo: http://jsfiddle.net/vJSwq/

answered May 28 '11 at 22:04

Andrew Whitaker

124,656
32
289
307

That doesn't seem to work in IE, the error is always is "`data(...)` is null or not an object." Is `data` actually unsupported in this case? Examples from http://api.jquery.com/data/ work properly, and the only warning on that page is that IE doesn't allow fiddling with XML in this way. – GSerg Feb 06 '13 at 12:14
2

Try using `.data('uiAutocomplete')` instead. This was changed in recent versions of jQueryUI. – Andrew Whitaker Feb 06 '13 at 14:02
1

If you are getting a "Attempted to assign to readonly property." in webkit. Try using `.data('ui-autocomplete')`. – stldoug Jun 18 '13 at 20:24
At this time, the last example on [this page](http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/) suggests using `.data('ui-autocomplete')`. – Salman A Nov 27 '13 at 08:44
@AndrewWhitaker i am facing a problem when i hover the data the data disappear. i am using autocomplete jquery ui – Hassaan Jun 28 '14 at 19:55
@HassaanKhan: It would be best to open a new question – Andrew Whitaker Jun 28 '14 at 21:30

score 6 · Answer 2 · edited May 23 '17 at 12:07

6

The code from Andrew Whitaker just work for one autocomplete input. If you select more than one input-element, the second autocomplete widget dosn't show any entrys. You have to add a foreach to handel all selected input elements like mentioned here

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

edited May 23 '17 at 12:07

Community

1
1

answered Feb 23 '12 at 12:46

Jan Hommes

5,122
4
33
45

I just ran into this today, with multiple instances. Thank you! – stldoug Apr 23 '14 at 21:53

score 1 · Answer 3 · answered Feb 06 '13 at 13:46

For recent versions of jQuery(1.8+) / jQuery UI (1.10+), you should use:

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

How to patch just one instance of Autocomplete on a page?

3 Answers3

Linked

How to patch *just one* instance of Autocomplete on a page?

3 Answers3

Linked

How to patch just one instance of Autocomplete on a page?