Question

I need to use typeahead for very large data. Generation of data consumes 4-5 seconds. So I cannot make Ajax calls each time. I download and cache the data upon user request. My code is the following:

$("#build-package-list-btn").click(function(){
        $.get**JSON**("/packages", function(data){
            // data is an array
            $("#typeahead-packages").typeahead({source:data});
            console.log(data == null); // returns false
        });
    })

It gives no error but whenever I try to write to typeahead text box, it gives me the following error:

Uncaught TypeError: Cannot call method 'toLowerCase' of null bootstrap.js:1644
Typeahead.matcher bootstrap.js:1644
(anonymous function) bootstrap.js:1631
e.extend.grep jquery-1.7.2.min.js:2
Typeahead.lookup bootstrap.js:1630
Typeahead.keyup bootstrap.js:1738
e.extend.proxy.g jquery-1.7.2.min.js:2
f.event.dispatch jquery-1.7.2.min.js:3
f.event.add.h.handle.i jquery-1.7.2.min.js:3

My typeahead is like this (JADE)

input#typeahead-packages(type="text",data-provide="typeahead")

Also in the Chrome Console I tried:

 $("#typeahead-packages").typeahead({source:["abcdef","abcddd","abcccc"]});

But typeahead does not give an error but it also does not work. I cannot find what am I doing wrong. I am using the 2.0.4 bootstrap.

EDIT: I changed it to getJSON from get it did not help. However when I construct data like this, it is working:

data = [new String((data[0])), new String((data[5]))];

Answer 1

Based on your update, the problem comes from the JSON.

jQuery.getJSON()

Important: As of jQuery 1.4, if the JSON file contains a syntax error, the request will usually fail silently.
(source)

You should concentrate on the source of the items. be sure that this is an array of strings. Your error suggest data is a string.

You can use the Chrome Console (or any of your choice), under the Network tab, and spy on the actual results of your AJAX request. JSONLint is an interesting tool to validate your result.

Then your next problem will be to update the source of an already initialized typeahead. You can use the following code :

var $myTypeahead = $('#myTypeahead');
var typeaheadObj = $myTypeahead.data('typeahead');
if(typeaheadObj) typeaheadObj.source = ["abc", "cde"];

Example (jsfiddle)