Question

我有这个ajax自动完成功能，可以在每个输入字段上使用.train类。但是，传递到.suggest_q类的建议显示在每个.suggest_q中，每个.train输入字段旁边，而不仅仅是正在使用的.train字段。我相信我正在使用正确的选择器，因为我在.click函数附近使用'this'而不是.train，但我仍然遇到问题。我希望此函数仅适用于用户正在使用的.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>

Answer 1

在自动填充代码中，您使用全局选择器。您需要保存所选元素，然后使用这些变量。

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

代码尚未经过测试，但应该可以使用。如果您发现任何错误，请留下评论，我将进行编辑。

自动完成，页面上有任意数量的输入字段

1 个答案: