web-dev-qa-db-ja.com

jQueryUIのui-autocompleteComboboxDivにカスタムクラスを追加する

Ui-autocomplete divにカスタムクラスを追加するにはどうすればよいですか？ページに複数のオートコンプリートウィジェットを読み込んでいますが、それらのドロップダウンの一部のスタイルを変える必要があるため、ui-autocompleteクラスを編集するだけでは不十分です。私はjQuery UIコンボボックスコード（ http://jqueryui.com/autocomplete/#combobox ）を使用しており、そのコードを変更することで、作成したui-autocompleteにクラスを追加したいと思いますdiv。

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

遅くなってすみません）。以下のコードをご覧ください。

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

classes引数を使用するだけです。

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

つまり、jQueryUIがui-autocompleteクラスを適用する場合は常に、your-custom-classも適用する必要があります。

これは、オートコンプリートだけでなく、すべてのjQueryUIウィジェットに関連しています。 ドキュメント を参照してください。

7
Jonathan Potter

このメソッドを使用して、ドロップダウンボックスにカスタムクラスを追加します

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