Autocomplete html block based on values in server

This might be a very noob question. Right now, I have the following autocomplete block

<script>
          var filename = src="{{ url_for('static', filename='cities.txt') }}"
          $.get(filename,function(data) {
            var cities = data.split('\n');
            $( "#autocomplete-1" ).autocomplete({
               source: cities
            });
         });
        </script>


<form class="form-inline my-2 my-lg-0" action="{{ url_for('fetch_vals' )}}" method="get">
            <label for="autocomplete-1"></label>
            <input id="autocomplete-1" class="form-control mr-sm-2" type="text" placeholder="{{box_text}}" name="cities">

            <button class="btn btn-secondary my-2 my-sm-0" type="submit">Go</button>
          </form>

Now, rather than reading from cities.txt, I want to autocomplete based on values in server

So, in my simple flask server, I have an endpoint like

@app.route('/cities')
def cities():
    cities = ['new york', 'portland']
    return jsonify(cities=cities)

the above returns a json like

{"cities": ['new york', 'portland']} 

When queried on '/cities' How do i swap this reading from file to reading from server and parsing the json. Thanks