通过事件关键字使自动完成中的字体权重正常

Question

我想模仿Google的建议列表，所以我有一个自动完成的建议，但我也想加粗字体如果与输入值不匹配，这里有一个例子：JsBin

正如你可以看到我已经为CSS 大胆建议和我试图让它正常的，如果它是相同的值：

if($('#input').val() == $('.ui-autocomplete li a').text()){ 
     $('.ui-autocomplete li a').css("font-weight", "normal"); 
} 

没有运气至今。我究竟做错了什么？

Answer 1

$('.ui-autocomplete li a').text()没有比较任何一个元素，或者他们每个人单独，而是这似乎来连接所有的可能性，所以，到时候你输入这样的“GHO”比较看起来是：

if ("gho" == "ghost riderghost huntersghost rider 2ghost adventuresghost rider spirit of vengeanceghanaghbghetto hikesghostbusters 3ghost") { 

} 

另一个问题，在本质上是相同的，就是

$('.ui-autocomplete li a').css("font-weight", "normal"); 

将改变风格为所有找到的匹配。我怀疑，这两种行为都不是你想要的。

你可能需要的是这样的：

$("#input").on('keyup', function(e){ 
    var val = $('#input').val(); 
    $.each($('.ui-autocomplete li a'), function() { 
    if (val == $(this).text()) { 
     $(this).css("font-weight", "normal"); 
    } 
    }); 
}); 

Answer 2

试试这个

$("#input").on('keyup', function(e){ 
     var val = $('#input').val(); 
     $.each($('.ui-autocomplete li a'), function() { 
     if (val == $(this).text()) { 
      $(this).addClass('fontWeight'); 
     } 
     }); 
}); 

新增CSS应该

.ui-autocomplete li a { 
    font-weight: bold; 
    } 
    .fontWeight{ 
    font-weight:normal !important; 
    }