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)

但是我想在选择列表中添加相同的疯狂类。

我试过了：

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

jQuery UI自动完成 - 下拉列表中的条件样式

1 个答案: