jQuery Forum

_renderItem is a private method of the autocomplete.  Line 285: http://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js#L285

So would you then say this is not something folks should use? I'm surprised that a demo makes use of an undocumented and I assume - unsupported - feature. Would you say it is a good idea to use this? My goal here is a drop down with small thumbnails in them.

I don't think there's any other way to do it.  There isn't a hook to render each result, and by default autocomplete will only render the ui.item.label value for each list item.

It's really unfortunate that the autocomplete widget is so poorly documented. It would be helpful if there was an explanation in the example text for this custom rendering example that explains the use of the renderItem method. Likewise, there is no real explanation of the callback function (response) used in the JSONP example,and  no documentation of the required properties value and label for ui.item. We are just supposed to figure out the 'magic' behind all this. I really like the new autocomplete widget, and agree with others that it is a major improvement over the other popular (very cool) autocomplete plugin , but I'm continually disappointed by the poor quality of documentation from the jQuery UI team. 

Contrary to the comment above, I can't seem to get HTML to work in the label field. If I return this JSON to the control:

["label":"<b>bold</b> text", "value":"some value"]

the <b> and </b> are rendered as plain text, not as HTML. What am I doing wrong?

Hey there,
I've been using this 'hack' to display HTML in my autocomplete box. I noticed a rather big problem with it however - it only works for the first autocomplete on the page. If you have a second autocomplete (with the same class tag for example) then the HTML will only be rendered on the first one. I've tried this using the demo posted above, so I'm certain that it's not my specific application that is causing the error.

It seems like the second text box isn't even running the code when I put a breakpoint on it with Firebug.

1. return $("<li></li>").data("item.autocomplete", item).append("<a><i>" + item.label + "</i></a>").appendTo(ul);

Because the documentation is so bad I just can't figure this one out!

Any help?

Hi Vasamuz, All,
 I've been able to fully modify the AC output by overriding _renderItem, as suggested.



 Here is the function

1. /*** Modify "_renderItem" - its an internal AutoComplete method ***/
2.     // - discussion is here: http://forum.jquery.com/topic/using-html-in-autocomplete
3.     // - _renderItem example is here: http://jqueryui.com/demos/autocomplete/#custom-data
4.     // - item is an array of hashmaps {label:.., customHTML:..} 
5.     //   * The "label" is put in the input textbox (not seen here)
6.     //   * the "customHTML" is displayed in the dropdown
7.     .data( "autocomplete" )._renderItem = function( ul, item ) {
8.         return $( "<li></li>" )
9.             .data( "item.autocomplete", item )
10.             .append( (item.title?item.title:"")  // Title, eg "Popular Products"
11.                 + "<a"
12.                 + ((item.classN)?" class="+item.classN:"")  // className, if one is passed in
13.                 + ">" + item.customHTML + "</a>" )
14.             .appendTo( ul );
15.     };

In the autocomplete "source" method, you can return a custom data object - data that your _renderItem function uses.  For instance, I add a "customHTML" and "classN" below:

1. $("#myTextField").autocomplete({
2. ...
3. source: function( request ) {    // Define source for AC data
4.   ..
5.   $.ajax({                              // Make Ajax call for AC data
6.    ...
7.    success: function( data ) {  // AC data returns
8.      responseArray = $.map( data, function(item) {    // build an array of hashmaps
   
9.                  ..        
10.                  return { label: item, customHTML: "<b>"+item+"</b>", classN: "someClassName"};           // "label" is inserted into text field when user selects it.
    
11.        });
12.       return responseArray;
    
13.    }
14. }}

In my own implementation, I concat multiple custom elements to responseArray.. horizontal rule bars, a "hide" button, section headings.

Hope that helps.   I've been very happy with the degree of customization.


-Gary

Hi Vasamuz, All,
 I've been able to fully modify the AC output by overriding _renderItem, as suggested.



 Here is the function

1. /*** Modify "_renderItem" - its an internal AutoComplete method ***/
2.     // - discussion is here: http://forum.jquery.com/topic/using-html-in-autocomplete
3.     // - _renderItem example is here: http://jqueryui.com/demos/autocomplete/#custom-data
4.     // - item is an array of hashmaps {label:.., customHTML:..} 
5.     //   * The "label" is put in the input textbox (not seen here)
6.     //   * the "customHTML" is displayed in the dropdown
7.     .data( "autocomplete" )._renderItem = function( ul, item ) {
8.         return $( "<li></li>" )
9.             .data( "item.autocomplete", item )
10.             .append( (item.title?item.title:"")  // Title, eg "Popular Products"
11.                 + "<a"
12.                 + ((item.classN)?" class="+item.classN:"")  // className, if one is passed in
13.                 + ">" + item.customHTML + "</a>" )
14.             .appendTo( ul );
15.     };

In the autocomplete "source" method, you can return a custom data object - data that your _renderItem function uses.  For instance, I add a "customHTML" and "classN" below:

1. $("#myTextField").autocomplete({
2. ...
3. source: function( request ) {    // Define source for AC data
4.   ..
5.   $.ajax({                              // Make Ajax call for AC data
6.    ...
7.    success: function( data ) {  // AC data returns
8.      responseArray = $.map( data, function(item) {    // build an array of hashmaps
   
9.                  ..        
10.                  return { label: item, customHTML: "<b>"+item+"</b>", classN: "someClassName"};           // "label" is inserted into text field when user selects it.
    
11.        });
12.       return responseArray;
    
13.    }
14. }}

In my own implementation, I concat multiple custom elements to responseArray.. horizontal rule bars, a "hide" button, section headings.

Hope that helps.   I've been very happy with the degree of customization.


-Gary

Try the following ( you can come up with a tighter version later..

I fount better solution here

http://stackoverflow.com/questions/7410962/jquery-autocomplete-for-2-input-field-same-class