CODEWITHSUNDEEP
javascriptjqueryjsonjquery-uiautocomplete
Saleh
Saleh

Reputation: 2719

Render custom auto complete results

I have the following code:

jQuery("#hotelName").autocomplete({
            serviceUrl:'xxxxxxxxxxxxxxxxxxxxxxxx',
            minChars:1,
            delimiter: /(,|;)\s*/, // regex or character
            maxHeight:200,
            zIndex: 9999,
            appendTo: "#ui-front"
         }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
                console.log(item);
              return jQuery( "<li>" )
                .data( "ui-autocomplete-item", item )
                .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
                .appendTo( ul );
            };

I'm getting this error from console:

Cannot set property '_renderItem' of undefined

I'm using jQuery UI Auto complete 1.2.9

Auto complete is working without any problem like this :

jQuery("#hotelName").autocomplete({
                serviceUrl:'xxxxxxxxxxxxxxxxxxxxxxxx',
                minChars:1,
                delimiter: /(,|;)\s*/, // regex or character
                maxHeight:200,
                zIndex: 9999,
                appendTo: "#ui-front"
             });

But I want to apply custom rendering. Any idea what is the problem?

EDIT:

I tried to upgrade jQuery UI Auto Complete to the latest version but that didn't help me.

Upvotes: 0

Views: 634

Answers (1)

raina77ow
raina77ow

Reputation: 106375

To get the widget instance (which _renderItem property you want to adjust) from a jQuery object wrapping the element having this widget applied, you should use instance() method of the widget, as shown in the docs. For example:

$('#input_to_autocomplete')
  .autocomplete(widgetOptions) // applying the widget
  .autocomplete('instance')    // getting the widget's instance
  ._renderItem = function(ul, item) { /*... */ }; // augmenting the display function

Upvotes: 1

Related Questions