Question

I am trying to get autocomplete working on any div with the id=”train” however, it seems to only be working on the first input field with a class of “train”

javascript code:

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

I found this old post but I am not sure how to adopt the fix for my problem 🙁

add more input fields code:

<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

Beause here:

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

you get every time only first field 🙂 try:

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

References:
Each
KeyUp
Val

I copypaste whole example:

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

                    }
                });
            }
        });
    });

});