Enabling jQuery Autocomplete on dynamically created input fields

Question

I've read almost every article i could find on how to accomplish this, but i'm still failing miserably. mostly because i'm an amateur at jQuery/Javascript.

I have a website that contains one input element. I've managed to get jQuery Autocomplete working nicely on this. The problem is that when i dynamically add additional elements using the .append method, these new elements do not work with autocomplete.

See jsfiddle: http://jsfiddle.net/aktive/r08m8vvy/

see jsfiddle for full code sample

Thankyou in advance for your help!! :) -Dean

Solution 1

You must bind autocomplete after adding new elements

$(wrapper).find('input[type=text]:last').autocomplete({
                source: availableAttributes
}); 

See example: http://jsfiddle.net/r08m8vvy/4/

Solution 2

I actually found that a more reliable way was to bind using 'on' with the 'focus' action to init the auto complete based on the field class and destory it on exit. This way it cleans up the garbage and only inits it once you need to.

I was using it with cloning rows though and even doing deep cloning, which would clone the plus and minus buttons for the rows, it wasn't cloning the autocomplete.

var auto_opts = {...opts...}

$('body').on('focus', '.search_field', function(){
    $(this).autocomplete(auto_opts).on('blur', function(){$(this).autocomplete('destroy')});
    });

It also means that you aren't forced into using the last row because it works on the field as you focus on it

Solution 3

See http://jsfiddle.net/r08m8vvy/2/

Give the new input an ID and call autocomplete on it. The initial autocompate call you make won't include the dynamically added inputs.

 $(wrapper).append('<div><input id="' + x + '" type="text" name="mytext"/><a href="#" class="remove_field">Remove</a></div>'); //add input box

 $( "input[id="+ x +"]" ).autocomplete({
     source: availableAttributes
 });    

Solution 4

I Updated the fiddle http://jsfiddle.net/r08m8vvy/5/

You have to bind the autocomplete for new element

$(wrapper).append($('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>').find(":text").autocomplete({
    source: availableAttributes
}));

View more solutions