Aggiunta di una classe personalizzata all'interfaccia ui autocomplete di jQuery UI Combobox Div

Question

Come si aggiunge una classe personalizzata al div Ui-autocompletamento? Ho diversi widget di autocompletamento che caricano sulla mia pagina e alcuni dei loro menu a discesa devono essere formattati in modo diverso, quindi non posso semplicemente modificare la classe ui-autocomplete. Sto lavorando con il codice combobox jQuery UI (http://jqueryui.com/autocomplete/#combobox) e, modificando tale codice, vorrei aggiungere una classe al div ui-autocomplete creato.

Answer 1

$("#auto").autocomplete({ 
    source: ... 
}).autocomplete("widget").addClass("your_custom_class"); 

Answer 2

Utilizzare questo metodo per aggiungere classi personalizzate per casella a discesa

_renderMenu: function(ul, items) { 
    var that = this; 
    $.each(items, function(index, item) { 
     that._renderItemData(ul, item); 
    }); 
    $(ul).find("li:odd").addClass("odd"); 
} 

Answer 3

Ci scusiamo per il ritardo). Dai un'occhiata al codice qui sotto.

$(function() { 
    $("#auto").autocomplete({ 
     source: ['aa', 'bb', 'cc', 'dd'] 
    }).data("ui-autocomplete")._renderItem = function (ul, item) { 

     ul.addClass('customClass'); //Ul custom class here 

     return $("<li></li>") 
     .addClass(item.customClass) //item based custom class to li here 
     .append("<a href='#'>" + item.label + "</a>") 
     .data("ui-autocomplete-item", item) 
     .appendTo(ul); 
    }; 
}); 

Answer 4

È sufficiente utilizzare l'argomento classes:

$("#auto").autocomplete({ 
    classes: { 
     "ui-autocomplete": "your-custom-class", 
    }, 
    ... 
}); 

Questo significa che ovunque jQuery UI si applica la classe ui-autocomplete dovrebbe applicarsi anche your-custom-class.

Questo è rilevante per qualsiasi widget dell'interfaccia utente di jQuery, non solo per il completamento automatico. Vedi lo documentation.