在Flask中使用jQuery自动完成function

之前已经问过这个问题，我想我已经完成了我在那里看过的事情，但我真的不知道自己做错了什么。 我对jQuery了解不多，但我会尽力解释我想要做的事情。

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

 $(function() { $( "#function_name" ).autocomplete({ source: '{{url_for("autocomplete")}}', minLength: 2, }); });  
 {{form.function_name}}  

该表单由此Flask表单类生成：

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

这是自动完成function：

 @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应该转到自动完成function并将一些JSON恢复为自动完成function。 至少我认为这是正在发生的事情。 我在这做错了什么？

Answer 1

更新：

如果您为其提供URL，则autocomplete不会autocomplete处理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])) 

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

Answer 2

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

如果项目绑定到current_user ，这非常方便，就像在Flask-Login中一样 。