Question

I am using Bootstrap typeahead in a Google App Engine application, but its not working.

My 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>

And my Python code:

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

Why is the autocompletetion not working? What is wrong with this code?

Answer 1

The typeahead expects the choices to be in an options variable. Convert your view to this:

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

Also, your HTML might need some changes, try the following:

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

Disclaimer here is that you don’t specify the version of Bootstrap you are using… this is working with v2+ of the framework.