无法使 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 调用。参见 here为什么(TL/DR:安全问题)。
另请注意，我特意更改了一些变量名称，以便您可以分辨出哪个脚本/flask 函数“看到”了哪个变量。例如，ajax 调用看不到列表 results，它看到 matching_results。这在(现在是 javascript 的)data 对象中。
要获取列表 matching_results 是关键，请使用附加脚本中的模式。它比简单地发送一个列表更困惑，但更安全，最终将允许您使用 JS/jquery 在客户端做更复杂的事情。
最后，select 选项将用户的选择打印到开发人员控制台，仅供引用，以便您实际响应用户的选择。
有关更完整的 jquery-autocomplete 示例，请参阅“使用 AJAX 加载数据”部分 here .
关于javascript - Flask 中的 jQuery 自动完成功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34704997/