无法使用JavaScript初始化BootStrap提前输入 [英] Trouble Using JavaScript to Initialize BootStrap Typeahead

问题描述

我有一个简单的Bootstrap type，看起来像这样:

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

那很好.

也就是说，我希望数据来自ajax调用，所以我想用JavaScript转换预输入初始化.当我写这篇文章时，我的预先输入无法正常工作:

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

我可以单步执行代码，看看它是否正在执行，并且看不到任何JavaScript错误，但是提前输入根本行不通.

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.

有什么想法吗?

推荐答案

在DOM准备就绪之前，尝试使用$(document).ready();对其代码进行环绕.

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);
});

这篇关于无法使用JavaScript初始化BootStrap提前输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！