twitter-typeahead not working with bloodhound

Question

I am trying to get twitter typeahead working and the type ahead functionality is not working. It does not display the auto completion part. Here is the javascript code.

 var films = new Bloodhound({
  datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  limit: 10,

  local: [{"id":1,"name":"English"},{"id":2,"name":"Hello"}]
  });

  films.initialize();

 $('.films .typeahead').typeahead(null, {
  name: 'film',
  displayKey: 'name',
  source: films.ttAdapter()
});

Here is the html

 <div class="col-sm-6 films">
 <input class="typeahead form-control" name="films" type="text" autocomplete="off" value=""/>   

</div>

And the jsfiddle location is http://jsfiddle.net/qLk8c/57/

Not sure what I missed.

Answer 1

Try to replace your custom datumTokenizer for:

Bloodhound.tokenizers.obj.whitespace('name')

This probably will do what you intended.

Edit:

Updated jsfiddle: http://jsfiddle.net/qLk8c/58/