jQuery在Flask中自动完成

jQuery autocomplete in Flask

本文关键字：Flask jQuery      更新时间：2023-09-26

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

    <head>
    ...
    <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
    <script src="../static/js/jquery.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>

    <script type="text/javascript">
    $(function() {
        $.ajax({
            url: '{{ url_for("autocomplete") }}'
            }).done(function (data) {
                $('#autocomplete').autocomplete({
                    source: data.json_list,
                    minLength: 2
                });
            });
        });
    </script>
    ...
    </head>
    <body>
    ...
       <div>
          <input name="autocomplete" type="text" id="autocomplete" class="form-control input-lg"/>
       </div>
    ...
    </body>

看起来firefox中的开发工具没有返回任何错误。终端返回以下信息：

"获取/自动完成HTTP/1.1"200-
"获取/HTTP/1.1"200-
"获取/static/css/bootstrap.css HTTP/1.1"304-
"GET/static/js/jquery.jsHTTP://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:

<head>
<link href="//code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="//code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
<script type="text/javascript">
$(function() {
    $("#autocomplete").autocomplete({
        source:function(request, response) {
            $.getJSON("{{url_for('autocomplete')}}",{
                q: request.term, // in flask, "q" will be the argument to look for using request.args
            }, function(data) {
                response(data.matching_results); // matching_results from jsonify
            });
        },
        minLength: 2,
        select: function(event, ui) {
            console.log(ui.item.value); // not in your question, but might help later
        }
    });
})
</script>
</head>
<body>
    <div>
        <input name="autocomplete" type="text" id="autocomplete" class="form-control input-lg"/>
    </div>
</body>

一点解释如下："q"是jQuery的$.getJSON-ajax调用中定义的搜索术语参数名称。它被传递到烧瓶中，并使用request.args.get提取。数据库查询就是根据它构建的，并且使用列表理解来构建结果。请注意，对于列表理解，您不初始化列表，也不使用for+pappend组合；一条优雅的线条可以做任何事情。

接下来，jsonify返回作为字典包装的列表results，关键字matching_results保存结果列表。不要试图使用json.dumps向ajax调用返回列表。请参阅此处的原因（TL/DR：安全问题）。

还要注意，我故意更改了一些变量名，这样您就可以判断哪个脚本/烧瓶函数"看到"了哪个变量。例如，ajax调用看不到列表results，它看到的是matching_results。这在（现在javascript的）data对象内部。

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

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

有关更完整的jquery自动完成示例，请参阅此处的"用AJAX加载数据"部分。

相关文章：