javascript - jQuery自动完成-下拉结果的条件样式

根据记录状态的特定值（“活动”与“不活动”），我想为下拉结果的每个记录赋予特定的背景色。怎么做？我尝试了以下方法：

json：

[{"id":"1234","label":"Player","status":"ACTIVE"},{"id":"1235","label":"Player","status":"ACTIVE"}, ...]

js：

...
autocomplete: ({
      source: function( request, response ) {
        ...
      },
      create: function() {

            $(this).data('ui-autocomplete')._renderItem  = function (ul, item) {
                return $( "<li>" )

                    if ( item.status == 'ACTIVE' ) {
                        .append( "<a style='background-color: #eaffd6' href='/"+ item.id +"' >" + item.label + "</a>" )
                    }
                    if ( item.status == 'INACTIVE' ) {
                        .append( "<a style='background-color: #ffe5e5' href='/"+ item.id +"' >" + item.label + "</a>" )
                    }
                    //.append( "<a style='background-color: #ffe5e5' href='/"+ item.id +"' >" + item.label + "</a>" )
                    .appendTo( ul );
            };

            $(this).data('ui-autocomplete')._renderMenu = function( ul, items ) {
                var that = this;
                $.each( items, function( index, item ) {
                    that._renderItemData( ul, item );
                });
            };

        }
    })
...

最佳答案

您的函数return在到达if( item.status...)之前就已经存在，因此永远不会评估此代码。考虑将标记构建为字符串，然后在完成后返回html字符串。
我将active或inactive的类添加到<li>元素，然后使用CSS规则.active { background-color: #eaffd6; } .inactive { background-color: #ffe5e5 }


编辑你可以尝试类似的东西

 $(this).data('ui-autocomplete')._renderItem  = function (ul, item) {
    var str_html = '<li class="' + item.status.toLowerCase() + '">'
        + '<a href="/"' + item.id + '" >' + item.label + '</a>'
        + '</li>'
    return str_html''
};