Autocomplete prediction with typehead.js does not work

Question

So I want to use typehead.js to have an autocomplete field (http://twitter.github.io/typeahead.js/) :

   $(document).ready(function() {

    var result;


        var result = new Bloodhound({
          datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.Domain.domain); },
          queryTokenizer: Bloodhound.tokenizers.whitespace,
          limit: 10,
          prefetch: {
            url: 'data.json'
          }
        });


    result.initialize();

    $('.example-twitter-oss .typeahead').typeahead(null, {
      name: 'twitter-oss',
      displayKey: 'Domain.domain',
      source: result.ttAdapter(),
      templates: {
        suggestion: Handlebars.compile([
          '<p class="repo-language">Class {{Domain.class}}</p>',
          '<p class="repo-name"><img src="http://www.google.com/s2/favicons?domain={{Domain.domain}}" alt=""> {{Domain.domain}}</p>',
          '<p class="repo-description">{{Domain.company}}</p>'
        ].join(''))
      }
    });


    });

This is my data source :

[
   {
      "Domain":{
         "domain":"duckduckgo.com",
         "company":"DuckDuckGo, Inc.",
         "category":"0"
      }
   },
   {
      "Domain":{
         "domain":"twitter.com",
         "company":"Twitter, Inc.",
         "category":"0"
      }
   },
   {
      "Domain":{
         "domain":"apple.com",
         "company":"Apple, Inc.",
         "category":"0"
      }
   }
]

It seems that the dropdown menu works fine, but the input field does not have the prediction displaying (I mean it you start typing "Twi" it does not display in grey "tter" ).

Any idea on how to solve this ?

Answer 1

Your display key is incorrect. typeahead.js will not parse your key and know that it needs to access a nested object. Instead, in order to achieve the functionality you want, do the following:

$('.example-twitter-oss .typeahead').typeahead(null, {
  // ...
  displayKey: function(o) { return o.Domain.domain; }
  // ...
});