Jquery autocomplete - custom html for result listing

Question

I am referring to this plugin: http://jqueryui.com/demos/autocomplete/

So the original structure for the results is

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all">   <li class="ui-menu-item">     <a class="ui-corner-all">item 1</a>   </li>   <li class="ui-menu-item">     <a class="ui-corner-all">item 2</a>   </li>   <li class="ui-menu-item">     <a class="ui-corner-all">item 3</a>   </li> </ul> 

I need to make the links inside to look something like this:

<a class="myclass" customattribute="something"> The item </a> 

Please don't tell me the only solution it to edit the plugin because i don't want the same format for all autocompletes on the site.

Answer 1

You need to replace the _renderItem method (for the autocomplete in question):

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

(assuming the items in your source have a property called customattribute)

As shown in this example: http://jqueryui.com/demos/autocomplete/#custom-data