2017-04-05 74 views
0

我正在处理代码点火器中的项目。我想在其中实现typeahead。我测试了typeahead的演示,它运行良好(使用jquery 2.2.2.min和jquerybundle)。但是,当我把我的项目文件夹内(已设计了bootstrap3)我的控制台显示

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

而且我发现,随着Twitter的引导3的预输入插件已被删除。因此,我从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> 

请帮我解决这个

+0

你把它放在引导3主js后? – Roljhon

+0

nop。在那之前。 – Ajzz

+0

这是我认为的问题。把它放在后面。 – Roljhon

回答

0

这个插件的文档是不是超级有用的,但是我想你会需要获得独立警犬文件并使用它。

我觉得你的脚本标签应该是这样的:

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

我会去了解一下抓住自举和警犬的最小版本太(我已将他们列为分钟的版本在我的例子)

相关问题