title: Uncaught TypeError: $(...).typeahead is not a function issue with bootstrap
body: <p>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</p>
  
  <pre><code> Uncaught TypeError: $(...).typeahead is not a function
  </code></pre>
  
  <p>And i found that With Twitter Bootstrap 3 the typeahead plugin had been dropped. Hence i placed bootstrap3-typeahead.js from <a href="https://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/master/bootstrap3-typeahead.js" rel="nofollow noreferrer">https://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/master/bootstrap3-typeahead.js</a>. But still am getting the same bug. My script is as follows.</p>
  
  <pre><code>   &lt;script src="&lt;?php echo base_url();?&gt;common/js/jquery-2.2.2.min.js"&gt;&lt;/script&gt;
     &lt;script src="&lt;?php echo base_url();?&gt;common/js/bootstrap.js"&gt;&lt;/script&gt;
     &lt;script src="&lt;?php echo base_url();?&gt;common/js/bootstrap3-typeahead.js"&gt;&lt;/script&gt;
     &lt;script src="&lt;?php echo base_url();?&gt;common/js/bootstrap3-typeahead.min.js"&gt;&lt;/script&gt;   
     &lt;script src="&lt;?php echo base_url();?&gt;common/js/typeahead.bundle.js"&gt;&lt;/script&gt;
  
  &lt;div id="bloodhound"&gt;
     &lt;input id="searchbox" class="typeahead" type="text" placeholder="type here"&gt;
     &lt;input id="otherbox"  type="text" placeholder="the right side box"&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  $(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 '&lt;option value='+item.id+'&gt;' + item.name + '&lt;/option&gt;';
        }
    },
     limit:25
  
  });
  $('.typeahead').on('typeahead:selected', function(evt, item) {
      $('#otherbox').val(item['name']);
    })
   });
  
  &lt;/script&gt; 
  </code></pre>
  
  <p>Please help me to fix this</p>