Jquery 将Css应用于自动完成li'；什么是基于条件的？

我正在尝试添加一个

css

到列表项中，条件是，如果列表项的

标签

文本包含

+

我需要添加红色，否则我只需要添加黄色背景色

我就快到了，但我不知道如何在我的

open

功能中访问来自服务器的

动态数据

代码：

$("#project").autocomplete({
        minLength: 0,
        source: function (request, response) {
            //In success of ajax call i fill request(projects)
            response(projects);
        },
        open: function (event, ui) {
            var len = $('.ui-autocomplete > li').length;
            //I can access projects here but i need filtered data list coming from server which is passed to response callback
            $('.ui-autocomplete > li').css("background-color", "yellow");

            for (var i = 0; i < len; i++) {
                // Here i use indexof('+') on each list item's label text and apply css but how to get the list here ??
            }

            $('#count').html('Founded ' + len + ' results');
        }
    });

$（“#项目”）.autocomplete({
最小长度：0，
来源：功能（请求、响应）{
//ajax调用成功时，我填写请求（项目）
答复（项目）；
},
打开：功能（事件、用户界面）{
var len=$（'.ui autocomplete>li'）。长度；
//我可以在这里访问项目，但我需要来自服务器的筛选数据列表，该列表将传递给响应回调
$（'.ui autocomplete>li'）.css（“背景色”、“黄色”）；
对于（变量i=0；i

选中小提琴
您可以使用带有函数的方法根据文本内容返回颜色：

open: function (event, ui) {
    $('.ui-autocomplete > li').css("background-color", function() {
        return $(this).text().indexOf('+') > -1 ? 'red' : 'yellow';
    });
    $('#count').html('Founded ' + len + ' results');
}

演示：

$("#project").autocomplete({
        minLength: 0,
        source: function (request, response) {
            //In success of ajax call i fill request(projects)
            response(projects);
        },
        open: function (event, ui) {
            var len = $('.ui-autocomplete > li').length;
            //I can access projects here but i need filtered data list coming from server which is passed to response callback
            $('.ui-autocomplete > li').css("background-color", "yellow");

            for (var i = 0; i < len; i++) {
                // Here i use indexof('+') on each list item's label text and apply css but how to get the list here ??
            }

            $('#count').html('Founded ' + len + ' results');
        }
    });

我还建议设置类名而不是内联css样式，这在样式方面提供了更好的灵活性

open: function (event, ui) {
    $('.ui-autocomplete > li:contains(+)').addClass('red');
    $('#count').html('Founded ' + len + ' results');
}

使用CSS规则：

.ui-autocomplete > li {
    background-color: yellow;
}
.ui-autocomplete > li.red {
    background-color: red;
}

演示：
另一种自定义项目显示的方法是使用

$("#project").autocomplete({
        minLength: 0,
        source: function (request, response) {
            //In success of ajax call i fill request(projects)
            response(projects);
        },
        open: function (event, ui) {
            var len = $('.ui-autocomplete > li').length;
            //I can access projects here but i need filtered data list coming from server which is passed to response callback
            $('.ui-autocomplete > li').css("background-color", "yellow");

            for (var i = 0; i < len; i++) {
                // Here i use indexof('+') on each list item's label text and apply css but how to get the list here ??
            }

            $('#count').html('Founded ' + len + ' results');
        }
    });

$（“#项目”）.autocomplete({
最小长度：0，
来源：功能（请求、响应）{
//ajax调用成功时，我填写请求（项目）
答复（项目）；
},
打开：功能（事件、用户界面）{
//做你还想做的事
}
}).data（'autocomplete'）。\u renderItem=功能（ul，项目）{
返回$（“
”）
.attr（“数据值”，项目值）
.addClass（/\+/.test（item.label）？“加号”：”
.append（item.label）
.附录（ul）；
};

演示：
是，将使用适当的类名。再次感谢您的提示。我们如何在
open
事件中访问值并检查条件。在这里拉小提琴。请检查评论。Cheers桥似乎显示良好，但我无法选择任何选项？你知道吗，阿伦。