Typeahead doesn't work with Bootstrap 3

Question

I cannot make it work. I don't have any error on the console. The list doesn't appear at all.

Here is my html code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/typeahead.jquery.js"></script>


<form method="POST" class="search-form" name="search-form">
    <input id="keywords" name = "searchtext" type="text" class="search-input" placeholder="Enter your text..." autocomplete="off">
    <button type="submit" class="search-submit">Search Now</button>
</form>

<script type="text/javascript">
    $(function(){

      // applied typeahead to the text input box
      $('#keywords').typeahead({
        name: 'keywords',

        // data source
        local: ['pattern recognition', 'supervised learning', 'support vector machines'],

        // max item numbers list in the dropdown
        limit: 10
      });

    });
</script>

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 .