Autocomplete on appended field in JQuery

Question

I am using JQuery to create additional input fields via clicking a link. Currently, I have an autocomplete plugin implemented that works fine for the fields that were created on page load. When the user adds new fields the autocomplete does not work for those specific fields. I was just wondering if someone could help me figure out how to get it to work.

<script type="text/javascript">
    $(document).ready(function() {
        $('#addingredient').click(function() {
            $('<li />').append('<input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" />')
            .append('<input type="text" class="amount" name="amount[]" id="amount[]" size="5" />')
            .append('<select class="unit" name="unit[]" id="unit[]"><?=$units ?></select>')
            .appendTo('#ingredients')
            .hide()
            .fadeIn('normal');
        });
</script>

<script>
    $(document).ready(function(){
        var data = "http://mywebsite.com/ingredients.php";
        $(".ingredient").autocomplete(data);
    });
</script>


<ul id="ingredients">
    <li><input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" /><input type="text" class="amount" name="amount[]" id="amount[]" size="5" /><select class="unit" name="unit[]" id="unit[]"><?=$units ?></select></li>
    <li><input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" /><input type="text" class="amount" name="amount[]" id="amount[]" size="5" /><select class="unit" name="unit[]" id="unit[]"><?=$units ?></select></li>
    <li><input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" /><input type="text" class="amount" name="amount[]" id="amount[]" size="5" /><select class="unit" name="unit[]" id="unit[]"><?=$units ?></select></li>
</ul>

Answer 1

The problem is with the autocomplete only being initialized on page load. Thus not being added to dynamicly added inputs. You should add the autocomplete to those too by calling the autocomplete again. So after you have apended the new input just call the autocomplete function again:

 $(".ingredient").autocomplete(data);

Answer 2

Because you're doing the autocomplete before a new one is created. It doesn't just auto-apply it, it only does it when the DOM is ready.

<script type="text/javascript">

$(document).ready(function() {
    $('#addingredient').click(function() {
        $('<li />').append('<input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" />')
        .append('<input type="text" class="amount" name="amount[]" id="amount[]" size="5" />')
        .append('<select class="unit" name="unit[]" id="unit[]"><?=$units ?></select>')
        .appendTo('#ingredients')
        .hide()
        .fadeIn('normal');

        var data = "http://mywebsite.com/ingredients.php";
        $('.ingredient').autocomplete(data);
    });
}

</script>

Try that instead.

Answer 3

You need to rerun the autocomplete on the new element, after it has been added to the DOM. The following will wait until the element has been faded in, then sets up the autocomplete on the new element with the correct class.

<script type="text/javascript">
    var data = "http://mywebsite.com/ingredients.php";
    $(document).ready(function() {
        $('#addingredient').click(function() {
            $('<li />').append('<input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" />')
            .append('<input type="text" class="amount" name="amount[]" id="amount[]" size="5" />')
            .append('<select class="unit" name="unit[]" id="unit[]"><?=$units ?></select>')
            .appendTo('#ingredients')
            .hide()
            .fadeIn('normal', function() {
                $(this).find('.ingredient').autocomplete(data);
            });
        });
        $(".ingredient").autocomplete(data);
    });
</script>