jQuery UI Autocomplete - Условный стиль при выпадении

Question

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

У меня есть javascript, который устанавливает их несколько иначе.

У меня есть проблема в стилизации падения вниз с «обязательным» классом CSS, чтобы сделать его показать как обязательный визуально (не-визуально impared пользователей ...)

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

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

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

Я попытался это:

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

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

.mandatory 
{ 
    background-color: #b9ffb9; 
} 

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

Answer 1

Возможно, вы хотите использовать _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); 
}; 

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

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; 
};