Utilizing the following script enables jQueryUI's autocomplete to function with xeditable, producing the desired outcome:
$(function(){
dialog.find('a.car').xEdit('autocomplete',{name:'carName', title:'Car Name', url: '/1.0/cars/', pk: carId, autocomplete: {
url: "/1.0/cars/",
params: {term:null, fields:['id','name']}
}});
});
$.fn.xEdit = function(type, options) {
var common={
placement: 'right',
ajaxOptions: {type: "PUT"},
send: 'always'
// pk: null, title: null, params: {name: null}, url: null, //Must be passed
}
// Different actions will be performed based on "type"
options.params={name: options.name};
delete(options.name);
options.type='text';
this.editable($.extend({}, common, {value: null}, options))
.on('shown', function(e, editable) {
var elem=this;
var $input=editable.input.$input.val('');
var $button=$input.parent().next().find('button.editable-submit').css('opacity', 0.3)
.bind('click.prevent', function() {return false;});
var autocomplete={
source: function( request, response ) {
options.autocomplete.params.term=request.term;
$.getJSON( options.autocomplete.url, options.autocomplete.params, function(json) {
var data=[];
for (var j = 0; j < json.length; j++) {
data.push({id:json[j].id,label:json[j].name});
}
response(data);
});
},
minLength: 2,
position: { my : "left top+20", at: "left bottom" },
select: function(e, ui) {
$input.blur();
$button.css('opacity', 1).unbind('click.prevent');
editable.option('params', {
value: ui.item.id,
name: options.params.name
});
}
};
if (typeof options.autocomplete.select != "undefined") autocomplete.select=options.autocomplete.select;
$input.focus(function() {
$button.css('opacity', 0.3).bind('click.prevent', function() {return false;});
})
.autocomplete(autocomplete)
.autocomplete('widget').click(function() {return false;});
});
};
I am now attempting to override the select: function(e, ui) {...} and potentially other methods in xedit with a new function defined in options, and have tried the following:
$(function(){
dialog.find('a.car').xEdit('autocomplete',{name:'carName', title:'Car Name', url: '/1.0/cars/', pk: carId, autocomplete: {
url: "/1.0/cars/",
params: {term:null, fields:['id','name']},
select: function(e, ui) {
// Implement different functionality
$input.blur();
$button.css('opacity', 1).unbind('click.prevent');
editable.option('params', {
value: ui.item.id,
name: options.params.name,
model: 123
}
);
}
}});
});
This approach leads to errors indicating that e, ui, $input, $button, editable, options are all undefined. The issue may stem from defining the new function in a differing variable scope.
Is there a method to define an object within one variable scope and then apply another scope to it?
PS. It is likely that the current approach is not ideal, so any suggestions on a cleaner solution would be appreciated.