相关疑难解决方法(0)

Flask AJAX自动完成

我正在尝试使用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>

Run Code Online (Sandbox Code Playgroud)

这是我的Flask方法:

@app.route('/_search_university')
def search_university():
    search = request.args.get('search')
    results = …

Run Code Online (Sandbox Code Playgroud)

python jquery flask

arn*_*rts

2013 03-09

6
推荐指数

1
解决办法

6796
查看次数

Flask中的jQuery自动完成功能

无法使jQuery自动完成小部件与Flask框架一起使用.(http://jqueryui.com/autocomplete/#remote这里有一个例子)
在manage.py中我得到了以下内容:

@app.route('/autocomplete', methods=['GET'])
def autocomplete():
    results = []
    search = request.args.get('autocomplete')
    for mv in db_session.query(Movie.title).filter(Movie.title.like('%' + str(search) + '%')).all():
        results.append(mv[0])
    return jsonify(json_list=results)

Run Code Online (Sandbox Code Playgroud)

我的index.html文件:

    <head>
    ...
    <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
    <script src="../static/js/jquery.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>


    <script type="text/javascript">
    $(function() {
        $.ajax({
            url: '{{ url_for("autocomplete") }}'
            }).done(function (data) {
                $('#autocomplete').autocomplete({
                    source: data.json_list,
                    minLength: 2
                });
            });
        });
    </script>
    ...
    </head>
    <body>
    ...
       <div>
          <input name="autocomplete" type="text" id="autocomplete" class="form-control input-lg"/>
       </div>
    ...
    </body>

Run Code Online (Sandbox Code Playgroud)

看起来像firefox中的dev工具不会返回任何错误.终端返回以下内容: