Customize jQuery UI Autocomplete Menu
HTML
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<input id="search_location_autointernal"/>
CSS
.dropdown-menu-1 li a {
color: red;
}
JavaScript
$.widget( "ui.autocomplete", $.ui.autocomplete, {
options: {
renderItem: null,
renderMenu: null
},
_renderItem: function( ul, item ) {
if ( $.isFunction( this.options.renderItem ) )
return this.options.renderItem( ul, item );
else
return this._super( ul, item );
},
_renderMenu: function( ul, items ) {
if ( $.isFunction( this.options.renderMenu ) ) {
//this.options.renderMenu( ul, items );
var self = this;
var category = null;
var sortedItems = items.sort(function(a, b) {
return a.category.localeCompare(b.category);
});
jQuery.each(sortedItems, function (index, item) {
if (item.category != category) {
category = item.category;
ul.append("<li class=\'ui-autocomplete-group\'>" + category + "</li>");
}
self._renderItemData(ul, item);
});
}
this._super( ul, items );
},
});
var acMenu_Base = function( ul, items ) {
$( ul ).addClass( 'dropdown-menu' );
},
acItem_Italicize = function( ul, item ) {
return $( '<li>' )
.append( $( '<a>' ).html( '<i>'+item.label+'</i>' ) )
.appendTo( ul );
},
$( '#search_location_autointernal' ).autocomplete({
source: [ { label: "Trullo di Monica", category: "titolo" }, { label: "Fasano", category: "comune" }, { label: "Trullo della Gioia", category: "titolo" }],
renderMenu: acMenu_Base,
renderItem: acItem_Italicize,
});