Jquery 在页面上使用任意数量的输入字段自动完成

我有一个ajax自动完成功能，它可以在每个输入字段上使用.train类。但是，传递到.suggest_q类中的建议将显示在每个.suggest_q中的每个.train输入字段旁边，而不仅仅是正在使用的.train字段。我相信我使用的是正确的选择器，因为我使用的是“this”而不是.train靠近.click功能，但我仍然有问题。我希望此函数仅适用于用户正在使用的.suggest_q和.train类，并使其他类不显示任何建议。使用自动完成功能处理正在键入的.train和.suggest\u 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>

$（函数（）{
var scntDiv=$（'p#u scents'）；
变量i=$（'#p#p'）.size（）+0；
$（'#addScnt'）.live（'click'，function（））{
$（'p>
'）。附录（scntDiv）；
i++；
返回false；
});
$（'#remScnt'）.live（'click'，function（））{
如果（i>2）{
$（this.parents（'p'）.remove（）；
我--；
}
返回false；
});
});

下面是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>

$（文档）.ready（函数（）{
$（“.train”）。每个（函数（索引，元素）{
$（“.train”）.live（“keyup”，function（）{
$（“.suggest_q”）.html（“”）；
var train=$（this.val（）；
列车=$.trim（列车）；
if（列车）
{
$.ajax({
url:“train\u ajax\u query.php”，
数据：“列车=”+列车，
成功：功能（msg）{
$（“.suggest_q”）.html（msg）；
$（“.suggest_q ul li”）.mouseover（函数（）{
$（“.suggest_q ul li”）.removeClass（“悬停”）；
$（此）.addClass（“悬停”）；
})
$（“.suggest_q ul li”）。单击（函数（）{
var value=$（this.html（）；
$（元素）.val（值）；
$（“.suggest_q ul li”）.remove（）；
});
}
});
}
});
});
});

这是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>

---

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

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

---

代码还没有经过测试，但应该可以工作。如果您发现任何错误，请留下评论，我将进行编辑。

jaudette，非常感谢您的帮助！我已经实现了你的代码，但它不能正常工作。它仍然在页面上的每个.suggest_q div中显示结果，现在当我单击一个建议值时，它不会将其添加到输入字段中。jaudette修复了单击事件，但当您单击选定的值时，它会显示在所有输入字段中。@user1725473我刚刚注意到您使用的ID everwhere，ID应该是唯一的。你应该改为添加类。很好！我刚刚删除了suggest_q和train的ID，所以现在只存在类…问题仍然存在exists@user1725473看，这似乎奏效了。但我必须模拟列表。