Question

我正在处理代码点火器中的项目。我想在其中实现typeahead。我测试了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>

请帮我解决这个问题

Answer 1

The docs for this plugin aren't super helpful but I think you will need to get the standalone Bloodhound file and use that.

I think your script tags should be like this:

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

I would look into grabbing the min versions of boostrap and bloodhound too (I have them listed as the min versions in my example)

未捕获的TypeError：$（...）。typeahead不是bootstrap的函数问题

1 个答案: