typeahead.js does not trigger source function

Question

I am trying to integrate twitter typeahead.js, for this I downloaded the library from https://github.com/twitter/typeahead.js and included typeahead.bundle.min.js

I then added the following

<input type="text" class="form-control typeahead font-normal">
$('.typeahead').typeahead({
    source: function(query, process) {
        console.log(query);
    }
});

The problem is it does trigger the source function, I am expecting that it prints the query in console. which it does not.

What could be possibly wrong here?

Thanks.

Following solution worked.

As pointed in the answer, I added the following library first

1. jquery.min.js
2. typeahead.bundle.min.js (https://twitter.github.io/typeahead.js/)
3. typeahead.jquery.min.js (https://twitter.github.io/typeahead.js/)
4. bootstrap3-typeahead.min.js (https://github.com/bassjobsen/Bootstrap-3-Typeahead)

And then initialized the following code

$('.typeahead').typeahead({
    source: function(query, process) {  
        process([
            {id: "1", name: "Display name 1"},
            {id: "2", name: "Display name 2"}
        ]);
    }
});

And it works.

Answer 1

Try this, You have to add bootstrap typeahead js

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.js"></script>

jsFiddle for the same https://jsfiddle.net/aa7zyyof/17/