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 code：

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

我找到了this old post，但我不确定如何对我的问题采取修复方法:(

添加更多输入字段代码：

<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() {

参考文献： Each 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回调以强制自行完成自动完成”

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

2 个答案: