Flask AJAX自动完成

我正在尝试使用Flask框架使jQuery UI自动完成小部件工作。

http://flask.pocoo.org/docs/patterns/jquery/

http://jqueryui.com/autocomplete/#remote

这是我的HTML：

      $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};   .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }   $(function() { $( "#university" ).autocomplete({ source: $.getJSON($SCRIPT_ROOT + "/_search_university", {search: $('input[name="university"]').val()}), minLength: 2, }); });    
 University:   
  

这是我的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来获得自动完成小部件的最基本用法。

Answer 1

你必须将$.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以查看更多信息