Hi,
you should use autocomplete="off" in all fields (required by Chrome and Webkit based browsers) and in the form (required by Firefox and Gecko based browsers) html tags. The fastest*** way to make this is to add the autocomplete attribute via Javascript with a code like this:

jQuery(document).ready(function(){

    jQuery('#member-registration, #member-registration input').attr('autocomplete','off');

});

*** there are many ways to make this and normally is recommended a template override (like your login module), but Registration form is dynamic and this is not possible with a simple way, so I suggested you the javascript solution.

Hi,

I created a custom js file in my_Template > Custom> JS > autocomplete-off.js - is this the correct way to do it?

It seems ok, because it is loaded in your site.

Also, I read that Chrome no longer supports autocomplete="off" and it's recommended to change instead to 'autocomplete="new-password"'

I'm sorry but I does not know this
Anyway my code add also autocomplete="off" in form declaration and it should be necessary to work with firefox like browsers.

This hasn't worked as yet - I have scripted this correctly?

You code is not correct. This code:

attr('autocomplete="new-password"');

should be

attr('autocomplete','new-password');

.
The correct should be something like:

jQuery(document).ready(function(){

    jQuery('#member-registration').attr('autocomplete','off'); // Firefox browser, autocomplete in form declaration

    jQuery('#member-registration input').attr('autocomplete','new-password'); // Other browsers, autocomplete in the fields

});