3

以前有人问过这个问题，我想我已经做了我在那里看到的事情，但我真的不知道我做错了什么。我对 jQuery 了解不多，但我会尽力解释我正在尝试做的事情。

我想根据来自数据库的查询自动完成，所以我的模板中有这个：

<script type="text/javascript">
    $(function() {
        $( "#function_name" ).autocomplete({
            source: '{{url_for("autocomplete")}}',
            minLength: 2,
        });
    });
</script>

<form id="function_search_form" method="post" action="">
    {{form.function_name}}
</form>

表单由这个 Flask 表单类生成：

class SearchForm(Form):
    function_name = TextField('function_name', validators = [Required()])

这是自动完成功能：

@app.route('/autocomplete')
def autocomplete():
    results = []
    search = request.args.get('term')
    results.append(db.session.query(Table.Name).filter(Table.Name.like('%' + search + '%')).all())
    return dumps(results)

所以 jQuery 应该去自动完成功能并获取一些 JSON 来自动完成。至少我认为这就是正在发生的事情。我在这里做错了什么？

4

2 回答 2

3

更新：

autocomplete如果您给它一个 URL，它不会自动处理 Ajax 请求，您必须手动进行：

$(document).ready(function() {
    $.ajax({
        url: '{{ url_for("autocomplete") }}'
    }).done(function (data) {
        $('#function_name').autocomplete({
            source: data,
            minLength: 2
        });
    });
}

您可能需要修改处理返回数据的方式，具体取决于 API 返回的内容。

更新 2：

您在服务器端的查询结果如下所示：

[[["string1"], ["string2"], ... ["stringn"]]]

您可以在发送之前将其展平：

import itertools
flattened = list(itertools.chain.from_iterable(result[0]))

但是您可能会改进您的查询以直接返回字符串列表。如果您需要帮助，您将需要发布整个代码。

于 2013-06-28T13:45:12.053 回答
2

实际上，您甚至不需要请求即可完成这项工作！使用标准 jquery-ui 自动完成，您可以将可能的项目放入 jinja 变量中，然后：

<script type="text/javascript">
$('#search_form').autocomplete({
    source: JSON.parse('{{jinja_list_of_strings | tojson | safe}}'),
    minLength: 2,
    delay: 10,
});
</script>

如果项目绑定到Flask-Logincurrent_user，这真的很方便。

<script type="text/javascript">
$('#search_form').autocomplete({
    source: JSON.parse('{{current_user.friends | map(attribute="name") | list | tojson | safe}}'),
    minLength: 2,
    delay: 10,
});
</script>
于 2018-01-06T23:31:54.707 回答