функция автозаполнения. renderItem и добавление класса в оболочку

идя пример здесь http://jqueryui.com/demos/autocomplete/#custom-data Мне интересно, как добавить стиль в ul фантик при использовании _renderItem():

    .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
            .appendTo( ul );
    };
7
jquery jquery-autocomplete jquery-ui jquery-ui-autocomplete

3 ответов

здесь будут один простой способ сделать это, нажав на open событие:

$("#auto").autocomplete({
    source: /* ... */,
    open: function () {
        $(this).data("autocomplete").menu.element.addClass("my_class");
    }
});

jQueryUI >= 1.9

$("#auto").autocomplete({
    source: /* ... */,
    open: function () {
        $(this).data("uiAutocomplete").menu.element.addClass("my_class");
    }
});

menu - это внутренний виджет, который использует функцию автозаполнения.

пример: http://jsfiddle.net/bx8Ye/

26

Если вы хотите добавить стиль в оболочку ul, вам нужно перегрузить _renderMenu (), а не _renderItem ().

вот пример, который устанавливает ширину UL и добавляет нижний колонтитул как последний li в ul

.data( "autocomplete" )._renderMenu = function( ul, data ) {

    var self = this;
    $(ul).css('width', settings.dropDownWidth);

    $.each( data, function( index, item ) {
        self._renderItem( ul, item );
    });

    $(ul).append("<div class='myFooter'>some footer text</div>");
};
3

при использовании jQuery UI 1.10 я использовал ответ Эндрю Уитакера, но мне пришлось изменить

$(this).data("autocomplete").menu.element.addClass("my_class");

to

$(this).data("uiAutocomplete").menu.element.addClass("my_class");
1