烧瓶AJAX自动完成 [英] Flask AJAX Autocomplete
问题描述
http://jqueryui.com/autocomplete/#remote
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.0.1 // ENhttp://w3.org/TR/html4/strict.dtd\">
< head>
< script type =text / javascriptsrc =// ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js\"></脚本>
< script type =text / javascriptsrc =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，
{ $（'input [name =university]'）。val（）}），
minLength：2，
}）;
}）;
< / script>
< / head>
< body>
< div class =ui-widget>
< label for =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（）
返回jsonify（结果）
我想我说得对，但似乎并不奏效。一旦我重新加载页面，函数被调用（即使没有输入，minLength = 2），寻找大学，但什么也没有显示（即使他找到了大学）。
在第一次查找（在页面之后）加载之后，如果在字段中键入多于两个字母，则小部件会停止向服务器发送请求。
有人可以帮我吗？我只是想通过使用Flask来获得使用AJAX的自动完成小部件的最基本的用法。
$。getJSON（）在函数中， pre $ source：function（request，response）{
$ .getJSON（$ SCRIPT_ROOT +/ _search_university，{
search：request
}，响应）;
$ b现在取决于你从服务器返回的内容，上述可能就足够了。但是，如果您需要过滤或映射数据以便自动完成显示，则需要使用 $。map（）函数将数据转换为可接受的格式（$ SCRIPT_ROOT +/ _search_university）
来源：function（request，response）{
$ .getJSON（$ SCRIPT_ROOT + （
search：request
），function（data）{
response（$ .map（data.results，function（item）{
return {
label ：item.name，
value：item.id
}
}））;
}）;
$ b $ p
$ b 如果你提供给我，用你的服务器返回的JSON，我可以更具体的
检查 http://api.jqueryui.com / autocomplete /＃option-source 查看更多信息
I'm trying to make the jQuery UI autocomplete widget work with the Flask framework.
http://flask.pocoo.org/docs/patterns/jquery/
http://jqueryui.com/autocomplete/#remote
This is my 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>
And this is my Flask method:
@app.route('/_search_university')
def search_university():
search = request.args.get('search')
results = session.query(University).filter(name.like('%' + search + '%')).all()
return jsonify(results)
I think I got it right but it doesn't seem to work. As soon as I reload the page the function is called (even without input and with the minLength = 2), looks for the universities but displays nothing (even when he found the universities).
After the first look-up (right after the page) loads, the widget stops sending requests to the server if when I type more then 2 letters in the field.
Can somebody help me here? I'm just trying to get the most basic usage of the autocomplete widget with AJAX by using Flask.
解决方案 You have to wrap the $.getJSON() in a function which will get executed by the plugin whenever the value of the textfield is changed
source: function( request, response ) {
$.getJSON($SCRIPT_ROOT + "/_search_university", {
search: request
}, response);
}
Now depending on what you are returning from the server, the above may suffice. However if you need to filter or map the data in order for autocomplete to display it you will need to use the $.map() function to transform the data to a format acceptable by autocomplete
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
}
}));
});
}
If you provide me, with the JSON that your server returns, I can be more specific
Check http://api.jqueryui.com/autocomplete/#option-source to see more information
这篇关于烧瓶AJAX自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
