web-dev-qa-db-fra.com

Ajouter une classe personnalisée à la Combobox Div ui-autocomplete de jQuery UI

Comment ajouter une classe personnalisée à la div ui-autocomplete? Plusieurs widgets de saisie semi-automatique se chargent sur ma page et certaines de leurs listes déroulantes doivent être stylées différemment pour que je ne puisse pas simplement éditer la classe ui-autocomplete. Je travaille avec le code de liste déroulante jQuery UI ( http://jqueryui.com/autocomplete/#combobox ) et, en modifiant ce code, je souhaite ajouter une classe à la div ui-autocomplete créée.

javascriptjquerycssjquery-uiautocomplete
13
Colin
$("#auto").autocomplete({
    source: ...
}).autocomplete( "widget" ).addClass( "your_custom_class" );
21
Ramesh

Désolé pour le retard). Regardez le code ci-dessous. 

$(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);
    };
});
14
Alex

Utilisez simplement l'argument classes:

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

Cela signifie que chaque fois que l'interface utilisateur jQuery applique la classe ui-autocomplete, elle devrait également appliquer your-custom-class.

Cela concerne tout widget d'interface utilisateur jQuery, pas seulement la saisie semi-automatique. Voir la documentation .

5
Jonathan Potter

Utilisez cette méthode pour ajouter des classes personnalisées à une liste déroulante

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