Flask AJAX 自动补全

6 投票

1 回答

8199 浏览

数据工程师

提问于 2025-04-17 18:30

我正在尝试让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)

我觉得我做得对，但似乎不太管用。每次我刷新页面，这个函数就会被调用（即使没有输入，而且设置的最小输入长度是2），它会查找大学，但什么都不显示（即使找到了大学）。

在第一次查找之后（页面加载后），如果我在输入框中输入超过2个字母，这个小部件就不再向服务器发送请求了。

有人能帮帮我吗？我只是想用Flask通过AJAX实现自动完成小部件的最基本用法。

ajax web开发前端技术用户体验 jquery 数据交互 flask autocomplete

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 来获取更多信息。

回答于 2025-04-17 由 Python大师

分享举报

Flask AJAX 自动补全

1 个回答

撰写回答