1

Google App EngineアプリケーションでBootstrapタイプアヘッドを使用していますが、機能しません。

私のHTML：

<div class="well">
  <input type="text" class="span3" id="search" name="search"
         data-provide="typeahead" data-items="4" />
</div>
<script>  
  $('#search').typeahead({
    ajax: { url: '/SearchCity', 
    triggerLength: 1 }
 });
</script>

そして私のPythonコード：

class SearchCity(webapp2.RequestHandler):
    def post(self):
        data = ['cat','dog','bird', 'wolf']
        data = json.dumps(data)         
        self.response.out.write(data)

自動完了が機能しないのはなぜですか？このコードの何が問題になっていますか？

4

2 に答える 2

2

タイプアヘッドは、選択肢が変数にあることを期待していoptionsます。ビューを次のように変換します。

class SearchCity(webapp2.RequestHandler):
    def post(self):
        data = ['cat','dog','bird', 'wolf']
        data = json.dumps({'options': data}) #Changed line
        self.response.out.write(data)

また、HTML を変更する必要がある場合もあります。次のことを試してください。

$('#id_chain').typeahead({
  minLength: 1,
  source: function (query, process) {
    return $.get('/SearchCity', function (data) {
      return process(data.options);
    });
  }
});

ここでの免責事項は、使用している Bootstrap のバージョンを指定しないことです...これはフレームワークの v2+ で動作しています。

于 2012-10-30T07:34:54.707 に答える
1

ブートストラップのドキュメントによると、これは次のようには見えません。

function get_data_async(query, callback) {
    $.ajax({
          url: '/SearchCity/',
          data: query,
          dataType: 'json',
          type: 'POST',
          success: callback
    })
}

$('#search').typeachead({source: get_data_async})
于 2012-10-30T07:42:21.847 に答える