jquery - 在谷歌应用程序引擎中使用 Bootstrap 提前输入自动完成

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

预输入期望选项位于 options 变量中。将您的 View 转换为:

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+ 一起使用的。