javascript - typeahead.js doesn't display the dropdown using remote data -

i think have around 5 hours since i'm struggling typeahead.js library. i'm trying load data using remote functionality don't have luck on making working completely.

these js libraries i'm loading:

<script src="/scripts/jquery-2.1.4.js"></script> <script src="/scripts/handlebars-v3.0.3.js"></script> <script src="/scripts/typeahead.bundle.js"></script> <script src="/scripts/bootstrap.js"></script> <script src="/scripts/respond.js"></script> 

then, in order initialize typeahead feature, i'm using piece of code:

$(function () {     var cards = new bloodhound({         datumtokenizer: function (datum) {             console.log(datum);             return bloodhound.tokenizers.whitespace(datum.value);         },         querytokenizer: bloodhound.tokenizers.whitespace,         remote: {             url: '/home/suggest?searchquery=%query',             wildcard: '%query',             filter: function (response) {                 return $.map(response, function (item) {                     return {                         value: item.text,                         tokens: item.document                     }                 });             }         }     });      cards.initialize();      $(".typeahead").typeahead({         hint: true,         highlight: true,         minlength: 3     },     {         name: 'cardsearch',         displaykey: 'value',         valuekey: 'value',         source: cards.ttadapter()     }).on('typeahead:render', function(ev, suggestion, isasync, dsname) {         console.log(suggestion, isasync, dsname);     }).on('typeahead:asyncreceive', function(ev, query, dsname) {         console.log(query, dsname);     }); }); 

from debugging steps realize remote data retrieval working because:

a) in firefox / firebug see request , response

b) i've put console.log statement inside filter assigned function , fine.

... , stops here... nothing being displayed dropdown list , hint not working either...

what i've done next put console.log statements on typeahead:render , typeahead:asyncreceive events , see parameters (except jquery event) undefined, makes me believe somehow, typeahead not being initialized correctly.

please, if have idea or suggestions, give me hint.

thank you!

later edit: how generated html looks like:

<div class="col-sm-3 col-md-3 pull-right"> <form action="/home/search" class="navbar-form" method="get" role="search"> <div class="input-group">   <input class="form-control typeahead" id="query" name="query" placeholder="search" type="text" value="" />     <div class="input-group-btn">       <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>     </div> </div> </form>