The bootstrap typehead.js doesnt seem to work

Question

Below are the .js files that I've included,

<script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/jquery.validate.min.js"></script>
    <script src="../js/offcanvas.js"></script>
    <script src="../js/bootstrap-tagsinput.min.js"></script>
    <script src="../js/typeahead.js"></script>

I have a textbox as,

<input id="search"/>

Now just below this textbox I wrote the following script,

<script>
   var colors = ["red", "blue", "green", "yellow", "brown", "black"];
   $('#search').typeahead({source: colors}); 
</script>

Within the textbox if I type 'r' then I'm supposed to get the typeahead suggestion "red", but the problem is I'm not getting any suggestion. Can anyone suggest how to make the typeahead suggestions work? Thanks in advance.

PS: The version of the included files are,

     jQuery: v1.10.2
     bootstrap.min.js: v3.0.0
     jquery.validate.min.js: v1.11.1
     bootstrap-tagsinput: v0.3.9
     typeahead: 0.10.1
     offcanvas is my custom js

Answer 1

The problem is that Bootstrap 3 does not include a typeahead library like 2.3 and earlier did. The typeahead.js library you are including works much differently, and there are some great examples on how to use it here and here.