在谷歌应用引擎中使用引导输入自动完成

Question

我在 Google App Engine 应用程序中使用 Bootstrap typeahead，但它不起作用。

我的 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)

为什么自动完成功能不起作用？这段代码有什么问题？

Answer 1

typeahead 期望选项位于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+。

Answer 2

正如bootstrap's documentation 所说，这看起来更像：

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

$('#search').typeachead({source: get_data_async})