-2

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

2 に答える 2

0

ここにボーズ：

    $(".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();
                        });

                    }
                });
            }
        });
    });

});
于 2012-10-20T20:08:08.433 に答える
0

と入力するたび$(".train")に、すべての要素を再度検索します。

最初の行が完成したら$(".train").each(function() {、 $(this) を使用して要素を参照するだけで、その関数が各要素で呼び出されます。

使用var train = $(".train").val();すると、最初の要素の値だけが取得されます。理由の詳細については、http://api.jquery.com/val/を参照してください。

その行を削除して$(this)'''train''' の代わりに使用すると、これはうまく機能するはずですが、.keyup() の周りの .each() も削除する必要があり$(".train").keyupます。要素。

あなたは基本的に、「すべてのtrain要素を調べて見つけます。それぞれについて、すべてのtrain要素を調べてキーアップ値を設定します。最初のtrain要素でオートコンプリートを強制する関数に設定します」と言っています。「各トレイン要素にキーアップコールバックを設定して、それ自体にオートコンプリートを強制する」と言いたい

于 2012-10-20T20:09:42.473 に答える