Preferred way to dynamically change variable in Javascript using Python/Flask framework

I am relatively new to HTML/Javascript, and I have a need which I am sure is common, but I don't know the preferred/standard way to handle it.

Basically, I have a web page with Javascript/jQuery code to use AJAX to dynamically change values on a page. I prefer not to encode the AJAX URL statically in the Javascript, but rather be able to pass the URL using Jinja from the Flask application.

So, for example:

$("#inputtext").autocomplete({
    source: function (request, response) {
        $.getJSON("{{ url_for('main.auto') }}?q=" + request.term, 
         function(data) {  console.log('doing something in the function') }}

The key question is the Jinja template in the middle {{ url_for('main.auto') }}. This correctly renders the route for 'main.auto' if the Javascript code is embedded in the HTML file. However, I prefer to separate the JS from the HTML. So, I took the above code and put it in a separate .js file and imported it into the HTML like this:

<script type="text/javascript" src="{{ url_for('static', filename='js/memberSearch.js') }}"></script>

The above code is in the memberSearch.js file in this example.

When I import the JS code like this, Jinja doesn't render the {{url_for('main.auto')}}. I suppose that this is because Jinja goes through the HTML code first before the JS code is imported.

I found an answer by @martijn-pieters here that lists four methods of passing data from HTML to Javascript:

• You can put that information in HTML tags. In the above example, your data is put in the repeated tags.

• Or you could add data attributes to your HTML, which are accessible both to Javascript code and to CSS.

• Or use AJAX to load data asynchronously; e.g. when you pick an option in the box, use Javascript and AJAX to call a separate endpoint on your Flask server that serves more data as JSON or ready-made HTML, then have the Javascript code update your webpage based on that.

• Or generate JSON data and put it directly into your HTML page. Just a some_variable_name = {{datastructure|tojson|safe}}; section is enough; then access that some_variable_name from your static Javascript code to do interesting things on the page. JSON is a (almost entirely a) subset of Javascript, and the way the tojson filter works is guaranteed to produce a Javascript-compatible data structure for you. The browser will load it just like any other embedded Javascript code.

Of these methods, I have successfully used the first one by embedding the Jinja template in a element like this, for example:

<input type="hidden" id="urlForPdf" value={{ url_for('main.auto') }}>

Which allows me to access the rendered URL in my JS code.

I have also tried the fourth method of generating JSON directly in JS like this:

<script type="text/javascript">var url = {{ url_for('main.auto')|tojson}}</script>

which allows me to access the variable url from the JS function.

The answer I referred to above also mentions using Data Attributes. I haven't tried this, but I believe it would work as well.

My question, then, is simply whether there is a preferred way of doing something like this? It seems that this must be a very common scenario and I assume that there is some more-or-less standard way of handling this. I'm just not sure which of the four possible solutions is preferred, or if perhaps there is another way altogether.

Thanks in advance for any light you can shed on this.