Question

I am working in a large site that has 2 conflicting jquery plugins included for doing autocmplete.

1) jquery.autocomplete.js (not part of jquery ui) that does :

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

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

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

Is there a way to specify that i am using only the second, jquery.ui widget
when calling

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

without changing the 2 files?

Answer 1

As the second autocomplete is using the $.Widget method of registering itself with jQuery it’ll be easiest to change the behaviour of the in-house one.

You won’t be able to load both of them without making some sort of change to the jQuery object between the two script loads because they’ll just 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 make:

$().autocomplete()

use the jQuery UI version, and

$().ourautocomplete()

use your local version.