我正在尝试让 jQuery UI 自动完成小部件与 Flask 框架一起工作。
http://flask.pocoo.org/docs/patterns/jquery/
http://jqueryui.com/autocomplete/#remote
这是我的 HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.1//EN" "http://w3.org/TR/html4/strict.dtd">
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type=text/javascript>
$SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>
<style>
.ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
<script type="text/javascript">
$(function() {
$( "#university" ).autocomplete({
source: $.getJSON($SCRIPT_ROOT + "/_search_university",
{search: $('input[name="university"]').val()}),
minLength: 2,
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="university">University: </label>
<input id="university", name="university" />
</div>
</body>
这是我的 Flask 方法:
@app.route('/_search_university')
def search_university():
search = request.args.get('search')
results = session.query(University).filter(name.like('%' + search + '%')).all()
return jsonify(results)
我想我做对了，但它似乎不起作用。一旦我重新加载页面，该函数就会被调用(即使没有输入并且 minLength = 2)，寻找大学但什么也不显示(即使他找到了大学)。
第一次查找(页面之后)加载后，如果我在字段中键入超过 2 个字母，小部件将停止向服务器发送请求。
有人可以帮我吗？我只是想通过使用 Flask 来获得 AJAX 自动完成小部件的最基本用法。
最佳答案
您必须将 $.getJSON() 包装在一个函数中，只要文本字段的值发生变化，该函数就会由插件执行
source: function( request, response ) {
$.getJSON($SCRIPT_ROOT + "/_search_university", {
search: request
}, response);
}
现在，根据您从服务器返回的内容，上述内容可能就足够了。但是，如果您需要过滤或映射数据以便自动完成显示它，您将需要使用 $.map() 函数将数据转换为自动完成可接受的格式
source: function( request, response ) {
$.getJSON($SCRIPT_ROOT + "/_search_university", {
search: request
}, function( data ) {
response( $.map( data.results, function( item ) {
return {
label: item.name,
value: item.id
}
}));
});
}
如果您向我提供您的服务器返回的 JSON，我可以更具体一些
检查 http://api.jqueryui.com/autocomplete/#option-source查看更多信息
关于jquery - Flask AJAX 自动完成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15310644/