jQuery 仅对某些结果自动完成样式

Question

是否可以仅向自动完成下拉列表中返回的部分结果添加样式？

下面的代码工作正常，但是，我想根据 data[x].restricted 的值设置各个结果的样式。当它是 true 时，我仍然想显示这些项目，但在自动完成下拉列表中将它们禁用或变灰。如果 data[x].restricted 是 false 那么我不想对这些项目应用任何额外的样式。

source: function (request, response) {
    $.ajax({
        url: $("#AutoCompleteCustomerNameUrl").val(),
        type: "POST",
        dataType: "json",
        data: {
            srchCus: request.term
        },
        success: function (data) {
            var x, array = [];
            for (x in data) {
                array.push({
                    label: (data[x].restricted ? 'Restricted Access - ' : '') + data[x].customerName,
                    name: data[x].customerFullName
                });
            }
        }
    });
}

如能提供有关如何实现此目的的任何帮助，我们将不胜感激。

Answer 1

方法 1（感觉很老套）

感觉这不是一个很好的选择，但您可以使用 jQuery 来根据文本 content 定位元素。自动完成建议生成为 <li>s，所以像这样的东西可能有效：

$('li:contains("Restricted Access")').addClass('grey');

问题是什么时候运行呢？当然，这些元素是在页面加载后动态添加的，因此必须运行在创建它们之后 - 你必须运行它基于一些自动完成事件。查看文档中的列表，也许 the open event 是最好的。每当菜单打开时，该事件的处理程序将运行，因此它可以将 CSS class 添加到与该选择器匹配的所有刚刚创建的建议中。例如（未经测试）：

$("#selector").autocomplete({
    // ... your normal autocomplete code ...
    open: function(event, ui) {
        // Add a CSS class to those suggestions matching the text 
        $('li:contains("Restricted Access")').addClass('grey');
    }
});

我还没有对此进行测试，因为它感觉不是正确的方法。下面是一个更好的、经过测试和工作的选项。

方法二（感觉不错）

您也可以使用 _renderItem extension point 执行此操作。如果您检查他们在那里提供的示例，您可以看到它是实际生成 HTML 的函数，它显示为您的自动完成建议。如果我们可以自定义它，我们可以做任何事情 - 例如检查项目的详细信息，添加特定的 CSS classes 等

我觉得那些文档不是很清楚，但是不难找到它的使用示例，例如 the Custom Data example（@Simon-K 在上面的评论中链接到）展示了如何使用它：

$("#selector").autocomplete({
    // ... your normal autocomplete code ...
}).autocomplete("instance")._renderItem = function(ul, item) {
    // Here we have complete control of what is returned, and access to
    // the items!
    return $("<li>").append("<div>" + item.label ...).appendTo(ul);
};

根据您的要求，我们可以这样做：

$("#selector").autocomplete({
    // ... your normal autocomplete code ...
}).autocomplete("instance")._renderItem = function(ul, item) {

    var style = (item.restricted) ? 'grey' : '';

    return $("<li>")
        .append("<div class='" + style + "'>" + item.label + "</div>")
        .appendTo(ul);
};

然后当然要添加 CSS class 来设置这些项目的样式：

.grey {
    color: #ccc;
}

Working JSFiddle.

jQuery 仅对某些结果自动完成样式

jQuery autocomplete styling on only certain results

ajax

jquery-ui-autocomplete

方法 1（感觉很老套）

方法二（感觉不错）