CODEWITHSUNDEEP
jqueryautocomplete
Joe Phillips
Joe Phillips

Reputation: 51100

Autocomplete on appended field in JQuery

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>

Upvotes: 1

Views: 892

Answers (4)

dyve
dyve

Reputation: 6013

Improving on previous answer by tvanfosson (preventing unnecessary DOM lookup):

<script type="text/javascript">
    var data = "http://mywebsite.com/ingredients.php";
    $(document).ready(function() {
        $('#addingredient').click(function() {
            var newIngredient = $('<input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" />');
            $('<li />').append(newIngredient)
                .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');
            newIngredient.autocomplete(data);
        });
        $(".ingredient").autocomplete(data);
    });
</script>

Upvotes: 0

tvanfosson
tvanfosson

Reputation: 532435

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>

Upvotes: 4

Kieran Senior
Kieran Senior

Reputation: 18220

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.

Upvotes: 2

Pim Jager
Pim Jager

Reputation: 32119

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

Upvotes: 1

Related Questions