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

Question

Am dealing with a project in code-igniter. I want to implement typeahead in it. I tested the demo of typeahead and it is working well(with jquery 2.2.2.min. and jquerybundle). But when i placed that inside my project folder (already designed with bootstrap3) my console is showing

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

And i found that With Twitter Bootstrap 3 the typeahead plugin had been dropped. Hence i placed bootstrap3-typeahead.js from https://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/master/bootstrap3-typeahead.js. But still am getting the same bug. My script is as follows.

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

Please help me to fix this

Update your post to show the order that you have your script tags in — maccettura

maccettura maccettura · Accepted Answer · 2017-04-06T16:59:09

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)

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

1 Answers