jQuery autocomplete : set to the links the title

Question

If I do :

var countryList = [
    "London",
    "Milan",
    "New York"
];

$("#divDest").autocomplete({
    source: countryList
});

the plugins will render somethings like this :

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 21; top: 243px; left: 768px; display: none; width: 131px;">
    <li class="ui-menu-item" role="menuitem">
        <a class="ui-corner-all" tabindex="-1">London</a>
    </li>

    <li class="ui-menu-item" role="menuitem">
        <a class="ui-corner-all" tabindex="-1">Milan</a>
    </li>

    <li class="ui-menu-item" role="menuitem">
        <a class="ui-corner-all" tabindex="-1">New York</a>
    </li>
</ul>

Well, suppose I'd like to put on the links not only the name of the country, but, in the title attribute some other info (for example, the ID for each country). Such as :

<a class="ui-corner-all" tabindex="-1" title="country_3523">New York</a>

How can I do it with that plugins?

Answer 1

  _renderItem: function( ul, item) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( $( "<a></a>" ).text( item.label ).attr('title', item.title) )
            .appendTo( ul );
    },