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文件:
<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 / 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:
<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调用中所定义。这已传递给flask,并使用拾取request.args.get
。据此构造数据库查询,并使用列表推导构造结果。注意,使用列表推导,你不会初始化列表,也不会使用for + append组合;一条优雅的线可以处理一切。
接下来,jsonify
返回results
包装为字典的列表,其中包含matching_results
保存结果列表的键。不要试图将json.dumps
列表返回给你的ajax
调用。见这里为什么(TL / DR:安全问题)。
还要注意,我故意更改了一些变量名,以便你可以告诉哪个脚本/烧瓶函数“看到”了哪个变量。例如,ajax调用看不到列表results,而是看到了matching_results
。那就是里面(现在是javascript的)data对象。
要获取列表matching_results是关键,请使用随附脚本中的模式。它比简单地发送列表更麻烦,但是更安全,最终将允许你使用JS / jquery在客户端执行更复杂的操作。
最后,该select
选项将用户的选择打印到开发者控制台,仅供参考,这样你就可以实际响应用户的选择。
以上是 Flask中的jQuery自动完成 的全部内容, 来源链接: utcz.com/qa/413894.html