jQuery UI Autocomplete - условный стиль при выпадающем меню - PullRequest
Новая
       37

jQuery UI Autocomplete - условный стиль при выпадающем меню

0 голосов
/ 09 января 2012

У меня есть два автозаполнения JQuery на экране.Один является обязательным, другой - нет.

У меня есть какой-то javascript, который настраивает их немного по-другому.

У меня проблема в том, чтобы стилизовать выпадающий список с помощью «обязательного» класса css, чтобы сделатьвизуально он отображается как обязательный (для пользователей с нарушениями зрения ...)

Я создал стилизованное поле ввода, это не проблема. 

(function ($) {
            $.widget("ui.comboboxMan", {
                _create: function () {
                    var self = this,
                    select = this.element.hide(),
                    selected = select.children(":selected"),
                    value = selected.val() ? selected.text() : $("#PickListSessionDefault").val()
                    var input = this.input = $("<Input>")
                    .addClass("ui-textbox")
                    .addClass("mandatory")
                    .insertAfter(select)
                    .val(value)

Но я хочучтобы добавить тот же класс madatory в список выбора.

Я пробовал это: 

                    open: function (event, ui) {
                        $('ul.ui-autocomplete').addClass('mandatory');
                        $('ul.ui-autocomplete li').addClass('mandatory');
                    },

Но это приводит к тому, что некоторые предметы не имеют фона по всей ширине.есть тонкая белая полоса слева и более толстая справа.CSS это: 

.mandatory
{
    background-color: #b9ffb9;
}

Предложения?

1 Ответ

0 голосов
/ 09 января 2012

Возможно, вы хотите использовать _renderItem. Я использовал пользовательский формат с категорией ID и т. Д., Ваш будет отличаться. 

snip...rest of autocomplete here
    open: function(event, ui)
        {
        }
}).data("autocomplete")._renderItem = function(ul, item)
{
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.Id + " <span class='autoCompCat'>" + item.Category + "</span> <span class='autoCompText'>" + item.MyText + "</span></a>")
        .appendTo(ul);
};

в моем случае, я использовал функцию в источнике с некоторыми элементами ajax для добавления к элементу: пример функции не оптимален, просто до боли очевиден:) 

function myAutocompleteJSONParse(data)
{
    var rows = new Array();
    var rowData = null;
    for (var i = 0, dataLength = data.length; i < dataLength; i++)
    {
        rowData = data[i];
        rows[i] = {
            Id: rowData.ProcedureCode,
            value: rowData.Description,
            label: rowData.Description,
            Category: rowData.Category,
            MyText: rowData.Description
        };
    }
    return rows;
};
...