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
Post a Comment