根据条件将CSS应用于“自动完成”?

超酷

我正在尝试css根据条件添加一个到列表项,如果一个列表项的label文本包含+我需要添加红色,否则我只需要添加黄色background-color。

我快到了,但是我不知道要执行dynamic data coming form server什么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');
        }
    });

这里检查小提琴

dfsq

您可以将cssmethod与功能结合使用,以根据文本内容返回颜色:

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

演示: http //jsfiddle.net/DZ9zU/35/

我还建议设置一个类名,而不是内联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;
}

演示: http //jsfiddle.net/DZ9zU/36/

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章