Ajout d'une classe personnalisée à l'interface utilisateur-autocomplete de l'interface utilisateur jQuery

Comment puis-je ajouter une classe personnalisée de l'interface utilisateur de saisie semi-automatique div? J'ai plusieurs de saisie semi-automatique des widgets de chargement sur ma page et de certains de leurs menus déroulants besoin de se coiffer différemment donc je ne peux pas il suffit de modifier l'interface de saisie semi-automatique de classe. Je suis en train de travailler avec l'INTERFACE utilisateur de jQuery code de combobox (http://jqueryui.com/autocomplete/#combobox) et, par la modification de ce code, je voudrais ajouter une classe à la création de l'interface utilisateur-la saisie semi-automatique div.

source d'informationauteur Colin

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

    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);
    };
});
  3. 4

    Simplement utiliser le classes argument:

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

    Cela signifie que partout où jQuery UI s'applique la ui-autocomplete classe elle devrait aussi s'appliquer your-custom-class.

    C'est utile à toute jQuery UI widget, pas seulement la saisie semi-automatique. Voir la la documentation.

  4. 0

    Utiliser cette méthode pour ajouter des classes à la zone de 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" );
}