javascript - 根据服务器中的值自动完成 html block

Question

这可能是一个非常菜鸟的问题。 现在，我有以下自动完成 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>

现在，我不想从 cities.txt 中读取，而是想根据服务器中的值自动完成

所以，在我简单的 Flask 服务器中，我有一个像这样的端点

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

上面返回了一个类似的json

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

在 '/cities' 上查询时 我如何将此读取从文件交换为从服务器读取并解析 json。 谢谢

Answer 1

一种解决方案是从您的客户端代码发出 AJAX 请求，类似这样:

$.ajax({
      type: 'GET',
      url: "/cities",
      dataType: "json",
      success: function(data){
                 $( "#autocomplete-1" ).autocomplete({
                     source: data["cities"]
                 });
               }
    });

您可以从 here 阅读更多关于 AJAX 的信息.