Jquery ui autocomplete with delegate

Question

I created jQuery UI autocomplete according to the docs and works for any input with class = "element tag" that is displayed on the page. However, the user can add input to dom via JS, so I need a way to bind autocomplete to new dynamically created inputs using a delegate. I am not sure how to do this, any ideas will be appreciated.

thank

Answer 1

You can delegate the "focusin" event to customize your input field.

See this post

Answer 2

For what it's worth, here is what I ended up using:

$('#some-container').delegate('input.to-autocomplete', 'focus', function(e) {
    $(this).autocomplete({
        source: autocomplete_url
        /* etc, etc */
    });
});
$('#some-container').delegate('input.to-autocomplete', 'blur', function(e) {
    var target = $(this);
    if (target.hasClass('ui-autocomplete-input')) {
        target.autocomplete('destroy');
    }
});

, , () , .

Answer 3

I had this, but I could not get it to work, here is my attempt:

http://jsfiddle.net/uGdm2/

Answer 4

For me it worked:

$('#autocomplete').on('focusin', 'input', function(){
    $(this).autocomplete({

    });
});