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

Filterable autocomplete, using ajax in Flask

本文关键字：Flask ajax 过滤      更新时间：2023-09-26

所以，我正在设计一个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的新手。

有什么想法吗？谢谢

问题是Flask的默认内容类型是text/html-并且jQuery将探查返回数据的内容类型（如果我记得正确的话），以确定如果您没有指定从服务器返回的数据类型，如何处理它。这意味着您的JSON数据将作为字符串而不是JavaScript对象传递给autocomplete。

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

return jsonify(data=results)

在JavaScript方面，您需要使用source选项的函数版本来提取数据并将其交给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
 });
相关文章：