Flask中的jQuery自动完成function

无法使jQuery自动完成小部件与Flask框架一起使用。 （ http://jqueryui.com/autocomplete/#remote这里是一个例子）
在manage.py中，我得到以下内容：

@app.route('/autocomplete', methods=['GET']) def autocomplete(): results = [] search = request.args.get('autocomplete') for mv in db_session.query(Movie.title).filter(Movie.title.like('%' + str(search) + '%')).all(): results.append(mv[0]) return jsonify(json_list=results) 

我的index.html文件：

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

看起来像firefox中的dev工具不会返回任何错误。 终端返回以下内容：

“GET / autocomplete HTTP / 1.1”200 –
“GET / HTTP / 1.1”200 –
“GET /static/css/bootstrap.css HTTP / 1.1”304 –
“GET /static/js/jquery.js HTTP / 1.1”304 –

小部件不起作用。 由于我不太了解jQuery，我无法弄清楚导致问题的原因。 有人可以帮帮我吗？

Answer 1

下面是JS / jQuery和Flask代码：

 @app.route('/autocomplete', methods=['GET']) def autocomplete(): search = request.args.get('q') query = db_session.query(Movie.title).filter(Movie.title.like('%' + str(search) + '%')) results = [mv[0] for mv in query.all()] return jsonify(matching_results=results) 

HTML / jQuery的：

按顺序解释一下：’q’是jQuery的$ .getJSON ajax调用中定义的搜索词参数名。 这是传递给烧瓶，并使用request.args.get 。 从中构造数据库查询，并使用列表推导来构造结果。 请注意，对于列表推导，您不会初始化列表，也不会使用for + append组合; 一条优雅的线条可以做到

接下来，jsonify返回包含为字典的列表results ，其中keys_results键包含结果列表。 不要试图使用json.dumps将列表返回给你的ajax调用。 请参阅此处原因（TL / DR：安全问题）。

另请注意，我故意更改了一些变量名称，以便您可以告诉哪个脚本/ flask函数“看到”哪个变量。 例如，ajax调用没有看到列表results ，它看到了matching_results 。 这就是内部（现在是javascript的） data对象。

要获取列表matching_results是关键，请使用附加脚本中的模式。 它比简单地发送一个列表更麻烦，但更安全，最终将允许你使用JS / jquery在客户端做更复杂的事情。

最后， select选项将用户的选择打印到开发人员控制台，仅供参考，以便您可以实际响应用户的选择。

有关更完整的jquery-autocomplete示例，请参阅此处的“使用AJAX加载数据”部分。