jquery ui autocomplete with delegate

Question

I have set up JQuery UI autocomplete according to the docs and it works for any input with class="tag-item" that is rendered to the page. However the user can add inputs into the dom via JS so I need a way to bind autocomplete to the new dynamically created inputs using delegate. I am not sure how to set this up, any ideas would be appreciated.

Thanks

Answer 1

You could delegate with a 'focusin' event to setup your input field.

See this post

Answer 2

For what it's worth, here's 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');
    }
});

My hope is that it will ease the burden on the browser since I'm autocompleting (possibly) hundreds of elements off and on, and the autocomplete result uls start stacking up otherwise.

Answer 3

For me the following worked:

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

    });
});

Answer 4

I had a go at this but couldn't seem to make it work, here's my attempt:

http://jsfiddle.net/uGdm2/