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

【问题标题】：jQuery UI Autocomplete - Conditional style on drop downjQuery UI 自动完成 - 下拉条件样式
【发布时间】：2012-02-06 04:19:21
【问题描述】：

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

但我想将相同的强制类添加到选择列表中。

我试过了：

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

但这会导致某些项目的背景没有超过整个宽度。左边有一条白色的细条，右边有一条较厚的白色。 CSS 是：

.mandatory
{
    background-color: #b9ffb9;
}

建议？

【问题讨论】：

标签： css jquery-ui autocomplete jquery-autocomplete jquery-ui-autocomplete

【解决方案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;
};

【讨论】：