使用jQuery自动完成Flask

这个问题以前有人问过，我想我已经做了我在那里看到的，但我真的不知道我做错了什么。我对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>

下面是自动完成功能：

@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应该转到autocomplete函数，并获取一些JSON返回autocomplete。至少我认为是这样的。我做错了什么？

更新：

autocomplete

不会自动处理Ajax请求如果您为其提供URL，则必须手动执行：

$(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]))

---

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

您甚至不需要请求就可以完成这项工作！使用标准jquery ui autocomplete，您可以将可能的项目放入一个jinja变量中，然后：

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

---

@莫芬：是的。这叫做函数名。我甚至检查了Flask生成的HTML，结果是正确的。编辑：看来评论已经消失了。哦，好吧。嗨，我正在尝试实现这个自动完成功能，但我不能这么做。我也尝试了你的方法，并尝试了下面提供的解决方案。但我在获取request.args.get（'term'）中的值时遇到了问题。对我来说总是无效的。不知道发生了什么事。如果您能提供您的工作代码片段，那就太好了。提前谢谢。自动完成功能实际上工作得很好。如果我转到127.0.0.1:5000/autocomplete？term=something，我将收到相应的JSON。我的桌子被称为其他东西，但就问题而言，它并不是真正需要的。另外，我之所以使用

results.append

和

results=[]

，是因为我使用了一个稍微复杂一点的查询，它涉及一个循环，但这不是我遇到的问题。好吧，我的下一个猜测是，您可能无法在

autocomplete

函数的

source

参数中直接给出URL。您可能必须手动执行Ajax请求。我将更新我的答案以给出一个例子。所以它目前实际上是从我的函数中得到的。我对函数做了一些修改，只返回JSON中的每个名称。但我还是没有得到任何自动完成。是否有一种方法可以格式化Flask的响应？我该怎么做？你用我的密码了吗？如果是，您是否可以尝试在handling js函数中

console.debug（data）

，以查看JSON的外观？我想，

autocomplete

只需要一个字符串列表（数组）。嗯，数据的形式是

[[[[[string1]，[[string2]，…[“stringn”]]]

，我假设它的类型不正确。什么是正确设置格式的好方法？

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

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