ajax - 自动完成仅适用于第一个输入字段

Question

我正在尝试使用 id="train" 对任何 div 进行自动完成，但是，它似乎只在第一个输入字段上使用“train”类

javascript代码：

<script type="text/javascript">
$(document).ready(function() {
    $(".train").each(function() {
        $(".train").keyup(function() {
        $("#suggest_q").html("");
            var train = $(".train").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();
                            $("#train").val(value);
                            $("#suggest_q ul li").remove();
                        });

                    }
                });
            }
        });
    });

});

</script>

HTML 代码：

    <form id="train_create_form" name="train" action="submit_train.php" method="POST">


    <input type="text" id="train" class="train" size="20" name="train[]" placeholder="Train 1" />
        <div id="suggest_q">

        </div>
    <input type="text" id="train" size="20" class="train" name="train[]" placeholder="Train 2" />
        <div id="suggest_q">

        </div>

  <input id= "submit_train" type="submit" name="submit_train" value="Submit All trains">
        </form>

我找到了这篇旧帖子，但我不确定如何解决我的问题:(

添加更多输入字段代码：

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

        $('#addScnt').live('click', function() {
                $('<p><input type="text" id="train" name="train[]" class="train" placeholder="Train ' + i +'" /><div id="suggest_q"></div><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>

Answer 1

因为这里：

    $(".train").each(function() {
        $(".train").keyup(function() {

你每次只得到第一个字段:) 尝试：

    $(".train").each(function(index, element) {
        element.keyup(function() {
            // or even: $(element).keyup(function() {

参考： 每个 KeyUp Val

我复制粘贴整个示例：

<script type="text/javascript">
$(document).ready(function() {
    $(".train").each(function(index, element) {
        $(element).keyup(function() {
        $("#suggest_q").html("");
            var train = $(element).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();
                        });

                    }
                });
            }
        });
    });

});

Answer 2

每次键入$(".train")时，都会再次搜索所有元素。

一旦你完成了你的初始$(".train").each(function() {行，你可以使用 $(this) 来引用元素，并且该函数将在每个元素上被调用。

当你使用时，var train = $(".train").val();你得到的只是第一个元素的值。有关原因的更多详细信息，请参阅http://api.jquery.com/val/。

如果您删除该行并仅使用$(this)而不是 '''train''' 这应该会更好，但您还需要摆脱 .keyup() 周围的 .each()，因为它$(".train").keyup已经适用于所有匹配元素。

您基本上是在说“遍历并找到所有火车元素。对于每个元素，请遍历并在所有火车元素上设置 keyup 值。将其设置为对第一个火车元素强制执行自动完成的功能”。您想说“在每个火车元素上设置 keyup 回调以对其自身强制执行自动完成”