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

Question

我有一个简单的 Bootstrap 预输入，如下所示：

<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">

效果很好。

也就是说，我希望数据来自 ajax 调用，所以我想用 JavaScript 转换 typeahead 初始化。当我写这篇文章时，我的预输入不起作用：

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">

我可以单步执行代码并查看它正在执行，我没有看到任何 JavaScript 错误，但 typeahead 根本不起作用。

我一定是错过了一些琐碎的事情，但是在盯着它看了很长时间之后，我仍然没有看到它。

有什么想法吗？

Answer 1

用$(document).ready(); 包围你的代码，它会在 DOM 准备好之前尝试加载。

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