jQuery UI自動完成 - 下拉條件樣式

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

在我的情況

，我與一些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; 
};