0

我有这个 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>
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 回答