6

jQueryUIオートコンプリートウィジェットを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>

そして、これは私のフラスコの方法です：

@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でオートコンプリートウィジェットの最も基本的な使用法を取得しようとしています。

4

1 に答える 1

9

$.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を確認してください。

于 2013-03-09T12:44:19.680 に答える