Bootstrap typeahead数组不工作

Question

我无法使bootstrap typeahead工作。现在搜索几个小时，如何用一个简单的数组来完成它。 我在做什么错？

<script src="bloodhound.js"></script> 
<script src="typeahead.bundle.js"></script> 
<script src="typeahead.jquery.js"></script> 

<script> 
    $('#query').typeahead({   
     local:['alpha','allpha2','alpha3','bravo','charlie','delta','epsilon','gamma','zulu'] 
    }) 
</script> 
<div class="container"> 
    <div class="row"> 
     <div class="well">  
      <form> 
       <fieldset> 
        <div class="form-group"> 
         <label for="query">Search:</label> 
         <input name="query" class="form-control" id="query" type="text" placeholder="Start typing something to search...">    
        </div> 
        <button class="btn btn-primary" type="submit">Search</button> 
       </fieldset> 
      </form> 
     </div> 
    </div> 
</div> 

Answer 1

所有你不需要包括bloodhound.js和typeahead.jquery.js，因为typeahead.bundle.js包括第一。

Typeahead.js有着不local的选择，因为你可以从documentation. 看到您可以使用本地选项，当你initialize Bloodhound，typeahead.js建议引擎。

您的代码将看起来像example on the official site之一：

<script src="typeahead.bundle.js"></script> 
<script> 
    var engine = new Bloodhound({ 
     datumTokenizer: Bloodhound.tokenizers.whitespace, 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     local: ['alpha','allpha2','alpha3','bravo','charlie','delta','epsilon','gamma','zulu'] 
    }); 
    $('#query').typeahead({ 
     /* Here you can specify typeahead options (highlight, hint, minLength, classNames) */ 
    }, { 
     name: 'letters', 
     source: engine 
    }); 
</script> 
<!-- Your HTML is OK --> 

不事先键入的内容默认情况下不提供样式，但您可以复制和示例页面导入CSS使用相同的外观&感觉。