jquery - 通过 event keyup 在自动完成中使字体粗细正常

Question

我想模仿谷歌建议列表，所以我有一个自动完成的建议，但如果它与输入的值不匹配，我也想加粗字体，这是一个例子： 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;
  }