Flask 中的 jQuery 自动完成功能
Posted
技术标签:
【中文标题】Flask 中的 jQuery 自动完成功能【英文标题】:jQuery autocomplete in Flask 【发布时间】:2016-04-14 18:51:33 【问题描述】:无法使 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 中的开发工具不会返回任何错误。 终端返回以下内容:
“GET /自动完成 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 了解不多,我无法弄清楚导致问题的原因。有人可以帮帮我吗?
【问题讨论】:
您的 ajax 是否正常工作并到达服务器端? 【参考方案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:
<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+append 组合;一条优雅的线条完成一切。
接下来,jsonify 返回列表 results
包装为字典,其中键 matching_results
保存结果列表。不要试图使用json.dumps
将列表返回给您的ajax 调用。请参阅here 为什么(TL/DR:安全问题)。
还请注意,我故意更改了一些变量名称,以便您可以知道哪个脚本/烧瓶函数“看到”哪个变量。例如,ajax 调用看不到列表results
,它看到matching_results
。这在(现在是 javascript 的)data
对象内部。
要获取列表matching_results
是关键,请使用附加脚本中的模式。它比简单地发送列表更麻烦,但更安全,并且最终允许您使用 JS/jquery 在客户端执行更复杂的操作。
最后,select
选项将用户的选择打印到开发者控制台,仅供参考,以便您实际响应用户的选择。
有关更完整的 jquery-autocomplete 示例,请参阅“使用 AJAX 加载数据”部分 here。
【讨论】:
完美答案!谢谢以上是关于Flask 中的 jQuery 自动完成功能的主要内容,如果未能解决你的问题,请参考以下文章