jquery ui autocomplete with delegate

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开发者_StackOverflow中文版 to the new dynamically created inputs using delegate. I am not sure how to set this up, any ideas would be appreciated.

Thanks

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

See this post

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.

For me the following worked:

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

    });
});

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

http://jsfiddle.net/uGdm2/