Flask中的jQuery自动完成功能

无法使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文件:

    
    ...
    
    
    


    
    ...
    
    
    ...
       

          
       
    ...
    

看起来像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,我无法弄清楚导致问题的原因.有人能帮帮我吗？

下面是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包含为字典的列表,其中包含matching_results保存结果列表的键.不要试图用来将json.dumps列表返回给你的ajax调用.请参阅此处原因(TL/DR:安全问题).

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

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

最后,该select选项将用户的选择打印到开发者控制台,仅供参考,以便您可以实际响应用户的选择.

有关更完整的jquery-autocomplete示例,请参阅此处的"使用AJAX加载数据"部分.