JSFiddle - React, Tailwind, and code Playground
HTML
<h1>
Override a jQuery Method
</h1>
<p>
<input id="birds" />
</p>
JavaScript
// Create a closure so that we can define intermediary
// method pointers that don't collide with other items
// in the global name space.
function monkeyPatchAutocomplete() {
// don't really need this, but in case I did, I could store it and chain
var oldFn = $.ui.autocomplete.prototype._renderItem;
var requestIndex = 0;
$.ui.autocomplete.prototype._initSource = function() {
// whatever
console.log("Override method");
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",
autocompleteRequest: ++requestIndex,
success: function(data, status) {
console.log("Override success function, handling request");
if (this.autocompleteRequest === requestIndex) {
response(data);
}
},
error: function() {
console.log("Override error function, handling request");
if (this.autocompleteRequest === requestIndex) {
response([]);
}
}
});
};
} else {
this.source = this.options.source;
}
};
}
// When DOM is ready, initialize.
$(document).ready(function() {
monkeyPatchAutocomplete();
...