我正在尝试使用Flask框架使jQuery UI自动完成小部件工作.
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个字母,则窗口小部件会停止向服务器发送请求.
解决方法
你必须将$.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以查看更多信息
