Type ahead - problems with json structure

Question

So I've been wrestling with learning Twitter's typeahead.js, and I got to say, the documentation leaves something to be desired. I've tried close to a dozen different methods I found posted around for adding the typeahead functionality to this input and I'm stumped. What, if anything am I missing in the below code? I'm not seeing any errors in the console, and idNums seems to contain the appropriate data, but I'm still not seeing the correct overlay.

My javascript:

    var idNums = new Bloodhound({
                    datumTokenizer: function (datum) { return Bloodhound.tokenizers.whitespace(datum.value);},
                    queryTokenizer: Bloodhound.tokenizers.whitespace,
                    prefetch: 'endpoint that 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 is my 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: So If I understand correctly, my code would look like this without the ajax call? or am I removing more than I should?

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

});

Answer 1

Unfortunately, I wasn't able to get the typeahead to work for me and ended up going with jQuery ui's Autocomplete

Answer 2

You are right, typeahead documentation is a nightmare. I found a workaround that worked for me not using Bloodhound, something like 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 your json data with the 'q' parameter and return it as a callback
                  cb(data);
                },
                error: function (err) {
                  ...
                }
            });
        }, 600);

        return true;
    }
});

This was done for querying a server side database so you may get rid of the AJAX call if you want. (and the handlebars)