使用JavaScript初始化BootStrap Typeahead时遇到问题

Question

I have a simple Bootstrap typeahead that looks like this:

<input tabindex="1" type="text" name="q" class="search-query" id="wSearch" 
    data-provide="typeahead" data-items="3" 
    data-source='["AL", "AK", "AZ", "AR", "CA", "CO", "CT"]' 
    placeholder="Search">

That works just fine.

That said, I want the data to come from an ajax call so I want to convert the typeahead initialization with JavaScript. When I write this, my typeahead doesn't work:

var options = {
    items: 3,
    source: ["AL", "AK", "AZ", "AR", "CA", "CO", "CT"]
};
$("#wSearch").typeahead(options);

...

<input tabindex="1" type="text" name="q" class="search-query" 
    id="wSearch" placeholder="Search">

I can step through the code and see that it is being executed and I don't see any JavaScript errors, but the typeahead simply doesn't work.

I've gotta be missing something trivial but, after staring at this for quite a while, I'm still not seeing it.

Any thoughts?

Answer 1

Surround your code with $(document).ready(); its attempting to load before the DOM is ready.

$(document).ready(function(){
   var options = {
    items: 3,
    source: ["AL", "AK", "AZ", "AR", "CA", "CO", "CT"]
   };
   $("#wSearch").typeahead(options);
});