CODEWITHSUNDEEP
javascriptjquerycssjquery-uiautocomplete
Colin
Colin

Reputation: 2487

Adding a Custom Class to jQuery UI's ui-autocomplete Combobox Div

How do I add a custom class to the ui-autocomplete div? I have multiple autocomplete widgets loading on my page and some of their drop downs need to be styled differently so I can't just edit the ui-autocomplete class. I am working with the jQuery UI combobox code (http://jqueryui.com/autocomplete/#combobox) and, by altering that code, I would like to add a class to the created ui-autocomplete div.

Upvotes: 18

Views: 32098

Answers (5)

Guilherme Moreira
Guilherme Moreira

Reputation: 1

I managed to get it working by following the documentation and by updating my jquery version to v1.12.4 at least (required by jquery classes options) and then updating also the jquery-ui version accordingly (v1.12.1)

Upvotes: -2

Jonathan Potter
Jonathan Potter

Reputation: 3081

Simply use the classes argument:

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

This means that wherever jQuery UI applies the ui-autocomplete class it should also apply your-custom-class.

This is relevant to any jQuery UI widget, not just Autocomplete. See the documentation.

Upvotes: 19

Ramesh
Ramesh

Reputation: 1887

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

Upvotes: 24

Alex
Alex

Reputation: 2174

Sorry for delay). Have a look at code below. 

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

Upvotes: 16

Alex
Alex

Reputation: 2174

Use this method to add custom classes to drop down box

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

Upvotes: 1

Related Questions