My application has been using prototype.js for a while. I am now trying to use jQuery and a jquery plugin for some enhanced functionality. However prototype.js and jQuery produce a conflict for the use of the '$' variable. This can ofcourse be resolved by the noConflict() method provided by jQuery and hence I can change the jQuery shortcut to what I want. The problem is how do I use the jQuery plugin which I want to import. Surely there is a better way than finding and replacing all the '$' variables.
The plugin being used is 'Selectize' https://github.com/brianreavis/selectize.js
You've edited your question to say:
The plugin being used is 'Selectize' https://github.com/brianreavis/selectize.js
That plugin doesn't rely on the global $ symbol at all; there's nothing you need to do to make the plugin compatible with a site that uses $ for something else (such as Prototype). The plugin only relies on the jQuery symbol. (It uses $ internally, but only as a local variable; it doesn't use the global.) Any properly-written jQuery plugin avoids using the global $, because of this very issue.
To use that on your site, you'd do something like this:
<script src="/path/to/prototype.js"></script>
<script src="/path/to/jquery.js"></script>
<script src="/path/to/your/code.js></script>
...where your code might look like this:
(function() {
var $j = jQuery.noConflict();
$j("some-selector").pluginMethod(); // jQuery
$("some-id").addClassName("foo"); // Prototype
})();
(You don't need the wrapper function there, it's just to avoid creating a $j global).
Or just:
jQuery.noConflict();
jQuery("some-selector").pluginMethod(); // jQuery
$("some-id").addClassName("foo"); // Prototype