wake-up-neo.net

Hinzufügen einer benutzerdefinierten Klasse zur ui-autocomplete-Combobox Div

Wie füge ich dem ui-autocomplete -Div eine benutzerdefinierte Klasse hinzu? Ich habe mehrere Widgets für die automatische Vervollständigung auf meiner Seite. Einige Dropdown-Listen müssen anders gestaltet werden, sodass ich die Ui-Autocomplete-Klasse nicht einfach bearbeiten kann. Ich arbeite mit dem jQuery UI-Combobox-Code ( http://jqueryui.com/autocomplete/#combobox ) und möchte durch das Ändern dieses Codes eine Klasse zum erstellten ui-autocomplete -Div hinzufügen.

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

Entschuldigung für die Verspätung). Schauen Sie sich den Code unten an. 

$(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

Verwenden Sie einfach das Argument classes:

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

Wenn also die jQuery-Benutzeroberfläche die Klasse ui-autocomplete anwendet, sollte sie auch your-custom-class gelten.

Dies gilt für jedes jQuery-Benutzeroberflächen-Widget, nicht nur für die automatische Vervollständigung. Siehe die Dokumentation .

5
Jonathan Potter

Verwenden Sie diese Methode, um benutzerdefinierte Klassen zum Dropdown-Feld hinzuzufügen

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