1

私はGoogleの提案リストを模倣したいので、提案のオートコンプリートを持っていますが、入力の値と一致しない場合はフォントを太字にしたいです。例を次に示します: JsBin

ご覧のとおり、提案のために CSS に太字を設定しました。それが値と同じであれば、それを正常にしようとしています。

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

これまでのところ運がありません。私は何を間違っていますか？

4

2 に答える 2

1

これを試してください

$("#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;
  }
于 2012-04-24T12:08:11.890 に答える
1

$('.ui-autocomplete li a').text()1 つの要素を比較したり、それぞれを個別に比較したりするのではなく、すべての可能性を連結しているように見えるため、「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");
    }
  });
});
于 2012-04-24T11:22:57.473 に答える