javascript - 更改包含特定字符串的 Jquery ui 自动完成结果

Question

这里有一个非常相似的问题: jquery autocomplete color change

这本质上是我想要做的，但如果搜索结果之一包含单词“Entry”，我想更改 css。

这是我使用 jquery ui 脚本调用的函数:

$(function() {
    $(".wholesale_product_id").autocomplete({
        source: "http://localhost/ingredients-sheets/search-3hou5njk3jndnjk3kj2.php",
        minLength: 1
    });
});

此函数正在运行，并将生成一个如下所示的列表(请注意，我已从开发工具复制了 html，只是复制了其中的一部分用于演示目的):

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-1" tabindex="0" style="display: none; width: 1110px; top: 322px; left: 469px;">
    <li class="ui-menu-item" role="presentation">
        <a id="ui-id-2" class="ui-corner-all" tabindex="-1">[*2042*] - Fanta Orange cans 355ml x 24</a>
    </li>
    <li class="ui-menu-item" role="presentation">
        <a id="ui-id-3" class="ui-corner-all" tabindex="-1">[*116*] - Fanta Strawberry cans 355ml x 24</a>
    </li>
    <li class="ui-menu-item" role="presentation">
        <a id="ui-id-4" class="ui-corner-all" tabindex="-1">[*4381*] - Fanta Berry cans 355ml x 24</a>
    </li>
    <li class="ui-menu-item" role="presentation">
        <a id="ui-id-44" class="ui-corner-all" tabindex="-1">Entry ID - [*2115*] - Fanta Strawberry cans 355ml x 24 (no full stop)</a>
    </li>
</ul>

浏览器中的结果图片:

Search results

我想要实现的目标:

我希望任何包含“条目 ID”或“条目”的搜索结果或标签为红色文本，并且最好位于列表顶部。

我已经尝试过:

只是想看看我是否可以使用以下代码更改所有搜索结果的颜色，但即使这样也不起作用，而且无需尝试查找字符串 Entry。

$( "a.ui-menu-item").css( "color", "#e74c3c");

任何建议都会很棒。

* 编辑*

更多信息，以条目 ID 开头的结果是我们保存的来自不同数据库表的自定义结果，我们希望这些结果以红色字体显示在搜索结果列表的顶部。

Answer 1

您可以使用 _renderItem 完全控制 AutoComplete 如何呈现其列表如果您想在服务器端执行此操作，只需返回带有 IsRedClass 属性和名称的 Json 列表

$(".wholesale_product_id").autocomplete({
    source: "http://localhost/ingredients-sheets/search-3hou5njk3jndnjk3kj2.php",
    minLength: 1
})
.data("autocomplete")._renderItem = function (ul, item) {
    return $("<li></li>")
      .data("item.autocomplete", item)
      .append('<a class="' + item.IsRedClass + '">' + item.Name + '</a>')
      .appendTo(ul);
};

或客户端:

$(".wholesale_product_id").autocomplete({
    source: "http://localhost/ingredients-sheets/search-3hou5njk3jndnjk3kj2.php",
    minLength: 1
})
.data("autocomplete")._renderItem = function (ul, item) {
    return $("<li></li>")
      .data("item.autocomplete", item)
      .append('<a class="' + item.Name.includes("Entry") ? "red" : "" + '">' + item.Name + '</a>')
      .appendTo(ul);
};