Pass function for options.source

Hey all,

I have a form that I wanted to have multiple autocomplete fields on thus necessitating $("#blah, #blah2").autocomplete();, etc.

The issue is the URL I wish to use in the ajax call is different depending on which input box the user inputs data into.

The current methods which need to be changed are as follows:

_initSource: function() {
		var self = this,
			array,
			url;
		if ( $.isArray(this.options.source) ) {
			array = this.options.source;
			this.source = function( request, response ) {
				response( $.ui.autocomplete.filter(array, request.term) );
			};
		} else if ( typeof this.options.source === "string" ) {
			url = this.options.source;
			this.source = function( request, response ) {
				if ( self.xhr ) {
					self.xhr.abort();
				}
				self.xhr = $.ajax({
					url: url,
					data: request,
					dataType: "json",
					context: {
						autocompleteRequest: ++requestIndex
					},
					success: function( data, status ) {
						if ( this.autocompleteRequest === requestIndex ) {
							response( data );
						}
					},
					error: function() {
						if ( this.autocompleteRequest === requestIndex ) {
							response( [] );
						}
					}
				});
			};
		} else {
			this.source = this.options.source;
		}
	},

and

_search: function( value ) {
		this.pending++;
		this.element.addClass( "ui-autocomplete-loading" );

		this.source( { term: value }, this.response );
	},

I propose a change to below:

_initSource: function() {
		var self = this,
			array,
			url;
		
		if ( $.isArray(this.options.source) ) {
			array = this.options.source;
			this.source = function( request, response ) {
				response( $.ui.autocomplete.filter(array, request.term) );
			};
		} else if ( typeof this.options.source === "string" || typeof this.options.source === "function" ) {
			if (typeof this.options.source === "string") {
				url = this.options.source;
			}
			this.source = function( request, response ) {
				if (typeof this.options.source === "function") {
					url = this.options.source(request);
					request = {term : request.term };
				}
				if ( self.xhr ) {
					self.xhr.abort();
				}
				self.xhr = $.ajax({
					url: url,
					data: request,
					dataType: "json",
					context: {
						autocompleteRequest: ++requestIndex
					},
					success: function( data, status ) {
						if ( this.autocompleteRequest === requestIndex ) {
							response( data );
						}
					},
					error: function() {
						if ( this.autocompleteRequest === requestIndex ) {
							response( [] );
						}
					}
				});
			};
		} else {
			this.source = this.options.source;
		}
	},

and

_search: function( value ) {
		this.pending++;
		this.element.addClass( "ui-autocomplete-loading" );

		this.source( { term: value , currentTarget: this.element }, this.response );
	},

The main differences being that in the event that this.options.source is a function, that function is called each time by this.search and the modified parameters it passes to allow an element-specific determination of the URL.

This is a very rough hack I have done, but I believe the logic is sound. There might be additional methods which need to be changed to accommodate it, as this is a very rough implementation.