0

.train のクラスを持つすべての入力フィールドで機能するこの ajax オートコンプリート関数があります。ただし、.suggest_q クラスに渡される提案は、使用されている .train フィールドだけでなく、各 .train 入力フィールドの隣のすべての .suggest_q に表示されています。.click 関数の近くで .train の代わりに「this」を使用しているため、正しいセレクターを使用していると思いますが、まだ問題があります。この関数は、ユーザーが使用している .suggest_q および .train クラスでのみ機能し、他のクラスには提案が表示されないようにしたいと考えています。入力されている .train および .suggest_a でオートコンプリート機能を使用するための最良の方法は何でしょうか?

新しい .train 入力フィールドを追加するための私の ajax コードは次のとおりです。

 <script type="text/javascript">
 $(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 0;

        $('#addScnt').live('click', function() {
                $('<p><input type="text" name="train[]" autocomplete="off" class="train"  /><span class="suggest_q" id="suggest_q"></span><a href="#" id="remScnt">Remove train</a></p>').appendTo(scntDiv);
                i++;
                return false;
        });

        $('#remScnt').live('click', function() {
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });
});
</script>

ここに ajax オートコンプリート コードがあります

<script type="text/javascript">
$(document).ready(function() {
    $(".train").each(function(index, element) {
       $(".train").live("keyup", function() { 
        $(".suggest_q").html("");
            var train = $(this).val();   
            train = $.trim(train);
            if(train)
            {
                $.ajax({

                    url: "train_ajax_query.php",
                    data: "train="+train,
                    success: function(msg) {
                        $(".suggest_q").html(msg);
                        $(".suggest_q ul li").mouseover(function() {
                            $(".suggest_q ul li").removeClass("hover");
                            $(this).addClass("hover");
                        })
                        $(".suggest_q ul li").click(function() {
                            var value   =   $(this).html();
                            $(element).val(value);
                            $(".suggest_q ul li").remove();
                        });

                    }
                });
            }
        });
    });

});

</script>

ここにHTMLがあります

<div id="p_scents">
    <input type="text" class="train" size="20" autocomplete="off" name="train[]" />
                <div id="suggest_q" class="suggest_q">

                </div>

</div>
4

1 に答える 1

0

オートコンプリート コードでは、グローバル セレクターを使用します。選択した要素を保存してから、これらの変数を使用する必要があります。

//Changed the live call for an on call since live is deprecated.
$(document).ready(function() {
  $("#p_scents").on("keyup", '.train', function() { 
    //we save vars with the objects we want to work with.
    var selectedTrain = $(this);
    var selectedSuggest = $(this).siblings('.suggest_q');
    selectedSuggest.html("");
    var train = selectedTrain.val();   
    train = $.trim(train);
    if(train) {
      $.ajax({
        url: "train_ajax_query.php",
        data: "train="+train,
        success: function(msg) {
          //the variables here should still be valid, unless you start more than one ajax
          //call simultaneously.
          selectedSuggest.html(msg);
          selectedSuggest.find("ul li").mouseover(function() {
            // This can happen when the variable selectedSuggest is no longer valid
            //for example, when another try has been done on another .train
            $(this).siblings("li").removeClass("hover");
            $(this).addClass("hover");
          });
          selectedSuggest.find("ul li").click(function() {
            var value   =   $(this).html();
            //again, the vars can have changed here, since the click can be a long time 
            //after the event registration
            $(this).parents('.suggest_q').siblings('input').val(value);
            $(this).parents('.suggest_q').find("li").remove();
          });
        }
      });
    }
  });
});

コードはテストされていませんが、動作するはずです。間違いを見つけた場合はコメントを残してください。編集します。

于 2012-11-27T12:26:38.860 に答える