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

Question

根据记录状态的具体值（“ACTIVE”与“INACTIVE”），我想给每个下拉结果记录一个特定的背景颜色。如何做？我尝试了以下：

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); 
       }); 
      };   

     }  
    }) 
... 

Answer 1

• 你的功能甚至达到你的if(item.status...)所以这段代码不会求return年代以前。考虑将标记构建为字符串，然后在完成时返回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'' 
};