css - jQuery UI 自动完成 - 下拉条件样式

Question

我在屏幕上有两个 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');
                    },  

但这会导致某些元素在整个宽度上没有背景。左边有一条细的白色 strip ，右边有一条较粗的白色 strip 。 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;
};