Conflict between two jquery plugins with same function name

Question

I am working on a large site with two conflicting jquery plugins enabled for autocomplete.

1) jquery.autocomplete.js (not included in jquery ui), which does:

$.fn.extend({ autocomplete: function ... 

2) jquery.ui.autocomplete.js (from the latest jquery ui library), which also uses the autocomplete keyword.

 $.widget( "ui.autocomplete", { ... 

Is there a way to indicate that I only use the second jquery.ui widget when calling

 $( "#tags" ).autocomplete ... 

without changing two files?

Answer 1

As the second autocomplete uses the $.Widget method to register itself using jQuery, the easiest way is to change the behavior of the internal one.

You cannot load both of them without making any changes to the jQuery object between the two script downloads, because they simply conflict with (or overwrite) each other.

I would try this:

 <script src="jquery.autocomplete.js"> </script> <script> // rename the local copy of $.fn.autocomplete $.fn.ourautocomplete = $.fn.autocomplete; delete $.fn.autocomplete; </script> <script src="jquery-ui.autocomplete.js"> </script> 

which will then do:

 $().autocomplete() 

use jQuery user interface version and

 $().ourautocomplete() 

use the local version.

Answer 2

I tried to do this with the jQuery UI tabs function, it should work the same for you. The function is technically a js object, so you can just rename it:

  $.fn.tabs2 = $.fn.tabs; delete $.fn.tabs; $("#tabz").tabs2({}); 

Hope this helps!

Edit

As Alnitak suggested, you also need to remove the previous function name. Also, I think .fn is required.