javascript - Type ahead - problems with json structure -


so i've been wrestling learning twitter's typeahead.js, , got say, documentation leaves desired. i've tried close dozen different methods found posted around adding typeahead functionality input , i'm stumped. what, if missing in below code? i'm not seeing errors in console, , idnums seems contain appropriate data, i'm still not seeing correct overlay.

my javascript:

    var idnums = new bloodhound({                     datumtokenizer: function (datum) { return bloodhound.tokenizers.whitespace(datum.value);},                     querytokenizer: bloodhound.tokenizers.whitespace,                     prefetch: 'endpoint returns below json',                 });  idnums.initialize();      $('#prefetch .typeahead').typeahead({                         hint: true,                         highlight: true,                         minlength: 1                 },                  {                   name: 'br_num',                   displaykey: 'value',                   source: idnums.ttadapter(),                 }); 

my html:

<div id = "prefetch">     <label>value:  </label>     <input  type = "text" name = "value" class="typeahead" placeholder="id number"/> </div> 

this json file:

 [{           "br_num":"20512"        },        {             "br_num":"22788"        },        {             "br_num":"22789"        },        {             "br_num":"22790"        },        {             "br_num":"22791"        },        {             "br_num":"22792"        },        {             "br_num":"22793"        },        {             "br_num":"22794"        }     ] 

edit: if understand correctly, code without ajax call? or removing more should?

$('.typeahead').typeahead({         hint: true,         highlight: true,         minlength: 2,         limit: 8     }, { name: "main-search", displaykey: "br_num", source: 'json url here' 

});

you right, typeahead documentation nightmare. found workaround worked me not using bloodhound, this:

var autosuggestcallworking, autosuggestcalltimeout; $('.typeahead').typeahead({     hint: true,     highlight: true,     minlength: 3,     limit: 8 }, {     name: "main-search",     displaykey: "br_num",     templates: {         suggestion: handlebars.compile('{{br_num}}')     },     source: function (q, cb) {         if (autosuggestcallworking != null) {             autosuggestcallworking.abort();         }         if (autosuggestcalltimeout) {             cleartimeout(autosuggestcalltimeout);         }         autosuggestcalltimeout = settimeout(function () {             autosuggestcallworking = $.ajax({                 datatype: 'json',                 type: 'get',                 url: '/json_file.json',                 chache: false,                 success: function (data) {                   // filter json data 'q' parameter , return callback                   cb(data);                 },                 error: function (err) {                   ...                 }             });         }, 600);          return true;     } }); 

this done querying server side database may rid of ajax call if want. (and handlebars)


Comments

Popular posts from this blog

How has firefox/gecko HTML+CSS rendering changed in version 38? -

javascript - Complex json ng-repeat -

jquery - Cloning of rows and columns from the old table into the new with colSpan and rowSpan -