Question

I’ve written the following convenience function to let me easily put jquery UI autocomplete on elements.

jQuery.fn.bindAutocomplete = function() {
  $(this).each( function() {
    $(this).autocomplete({
      source: $(this).data('autocomplete-source')
    });
  });
}

I always use the convention of attaching data-autocomplete-source to an element so I can call this anywhere just like so:

$('input#name').bindAutocomplete();

Now, the autocomplete function can take callback functions as optional arguments after the options hash. I almost never need to mess with that, but I’ve found that in a small number of instances I’d like to pass a success function through. Obviously I can just rewrite the full autocomplete function when I need to pass it callbacks, but I’d rather just rewrite my bindAutocomplete() function so it can accept optional callback functions and pass them through to autocomplete().

So, how do you do that?

---

Update

I tried this, based on a close but not quite answer below:

jQuery.fn.bindAutocomplete = function(callbacks) {
  $(this).each( function(callbacks) {
    options = $.extend({source: $(this).data('autocomplete-source')}, callbacks);
    $(this).autocomplete(options);
  });
}

This binds autocomplete correctly whether you pass callbacks in or not, but if you do pass callbacks they don’t get called.

Ie: the following triggered autocomplete but not the callback.

$('input#name').bindAutocomplete({ select: function(){alert("working");} })

Answer 1

I guess you can do this if that’s what you mean…

jQuery.fn.bindAutocomplete = function( opts ) {        
  return this.each(function(){
    opts = $.extend({
      source: $(this).data('autocomplete-source')
    }, opts);
    $(this).autocomplete( opts );
  });
}

$('input#name').bindAutocomplete({
  change: function() { ... },
  close: function() { ... }
});