javascript - Autocomplete prediction with typehead.js does not work -

so want use typehead.js have 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 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 dropdown menu works fine, input field not have prediction displaying (i mean start typing "twi" not display in grey "tter" ).

any idea on how solve ?

your display key incorrect. typeahead.js not parse key , know needs access nested object. instead, in order achieve functionality want, following:

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