未捕获的 TypeError: $(...).typeahead 不是 bootstrap 的函数问题答案

【问题标题】：Uncaught TypeError: $(...).typeahead is not a function issue with bootstrap未捕获的 TypeError: $(...).typeahead 不是 bootstrap 的函数问题
【发布时间】：2017-04-07 00:59:09
【问题描述】：

我正在处理代码点火器中的一个项目。我想在其中实现预输入。我测试了 typeahead 的演示，它运行良好（使用 jquery 2.2.2.min。和 jquerybundle）。但是当我把它放在我的项目文件夹中（已经用 bootstrap3 设计）时，我的控制台正在显示

 Uncaught TypeError: $(...).typeahead is not a function

我发现使用 Twitter Bootstrap 3 的 typeahead 插件已被删除。因此，我从https://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/master/bootstrap3-typeahead.js 放置了 bootstrap3-typeahead.js。但仍然遇到同样的错误。我的脚本如下。

   <script src="<?php echo base_url();?>common/js/jquery-2.2.2.min.js"></script>
   <script src="<?php echo base_url();?>common/js/bootstrap.js"></script>
   <script src="<?php echo base_url();?>common/js/bootstrap3-typeahead.js"></script>
   <script src="<?php echo base_url();?>common/js/bootstrap3-typeahead.min.js"></script>   
   <script src="<?php echo base_url();?>common/js/typeahead.bundle.js"></script>

<div id="bloodhound">
   <input id="searchbox" class="typeahead" type="text" placeholder="type here">
   <input id="otherbox"  type="text" placeholder="the right side box">
</div>

<script type="text/javascript">
$(document).ready(function(){
    var source = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url:'testt?st=%QUERY',
        wildcard: '%QUERY',
    }
});
// Initialize the Bloodhound suggestion engine
source.initialize();

$('#searchbox').typeahead(null, {
   // display: name,
   display: function(item){ return item.name},
   source: source.ttAdapter(),
    templates: {
      suggestion: function (item) {
          return '<option value='+item.id+'>' + item.name + '</option>';
      }
  },
   limit:25

});
$('.typeahead').on('typeahead:selected', function(evt, item) {
    $('#otherbox').val(item['name']);
  })
 });

</script>

请帮我解决这个问题

【问题讨论】：

你是把它放在bootstrap 3 main js之后吗？
没有。在此之前。
这就是我认为的问题。放在后面。
我更换了订单。还是同样的问题。
更新您的帖子以显示您的脚本标签的顺序

标签： jquery twitter-bootstrap typeahead

【解决方案1】：

此插件的文档不是很有帮助，但我认为您需要获取独立的 Bloodhound 文件并使用它。

我认为你的脚本标签应该是这样的：

<script src="<?php echo base_url();?>common/js/jquery-2.2.2.min.js"></script>
<script src="<?php echo base_url();?>common/js/bootstrap.min.js"></script>
<script src="<?php echo base_url();?>common/js/bloodhound.min.js"></script>
<script src="<?php echo base_url();?>common/js/bootstrap3-typeahead.min.js"></script>

我也会考虑获取 boostrap 和 Bloodhound 的最低版本（在我的示例中我将它们列为最低版本）

【讨论】：