javascript - 可过滤的自动完成，在 Flask 中使用 ajax

Question

所以，我正在设计一个 html 表单，它有两个输入字段。

html模板代码:

<form role="form" action="/cities/" method="get" autocomplete="on">
    <label for="#input1"><strong>Country:</strong></label>
    <input id="#input1" type="text" name="country">
    <label for="#input2"><strong>State:</strong></label>
    <input id="#input2" type="text" name="state">
    <input type="submit" value="Go!">
</form>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $.ajax({
        url: '/autocomplete',
        type: 'GET',
        }
    }).done(function (data) {
        $('#input1').autocomplete({
            source: data,
            minLength: 2,
        });
    });
    }
</script>

Flask 应用程序具有以下路线:

@app.route('/autocomplete/', methods=['GET'])
def autocomplete():
    country = request.args.get('country')
    state = request.args.get('state')
    if country:
        results = countries_to_states(country)
    elif state:
        results = state_to_countries(state)
    return json.dumps(results)

其目的是:

如果用户在 #input1 字段中输入部分国家/地区名称，则会自动补全国家/地区名称。一旦用户从自动完成中选择一个国家/地区，它就会使用该国家/地区数据来过滤并返回自动完成 #input2 的可能状态值。 同样，当用户首先在 #input2 字段中输入数据时，反之亦然。

路由代码有点不完整，但假设过滤在那里发生得很好。 我所坚持的是使其工作所需的 ajax、js 代码。 很多代码都是从其他 SO 答案中粘合在一起的，但它主要是损坏的，因为我是 JS 的新手。

有什么想法吗？谢谢!

Answer 1

问题是 Flask 的默认内容类型是 text/html - 并且 jQuery 会嗅探返回数据的内容类型(如果我没记错的话)来找出如果你不这样做的话如何处理它指定您从服务器返回的数据类型。这意味着您的 JSON 数据将作为字符串而不是 JavaScript 对象传递到autocomplete。

Python 方面的修复是使用 jsonify将数据传回 - 这将导致返回正确的 application/json Content-Type header 。由于 jsonify 不支持顶级数组，因此您需要将数据传回对象:

return jsonify(data=results)

在 JavaScript 方面，您将需要使用 the function version of the source option提取数据并将其交给 jQuery UI:

function handleAutoComplete(request, resultCallback) {
  // Explicitly tell jQuery we expect JSON back
  $.getJSON("/autocomplete?country=" + encodeURIComponent(request.term))
            // Handle successful responses *and* failures
            // to ensure the widget maintains the correct state
            .then(function(result) { resultCallback(result.data); })
            .fail(function(err) { resultCallback(); });
}

$('#input1').autocomplete({
  source: handleAutoComplete,
  minLength: 2
 });