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

Thanks

回答1:

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

See this post

回答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.

回答3:

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

http://jsfiddle.net/uGdm2/

回答4:

For me the following worked:

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

    });
});