Bootstrap typeahead not showing results - laravel

Question

I'm using https://github.com/bassjobsen/Bootstrap-3-Typeahead with Laravel 5.3.
I was using the twitter version before hand which worked fine, except the styles were broken. So I switched to this version but the drop down isn't being rendered. There are no errors either in the console.
If I open the network tab in dev tools, I can see that the request being made and data is being successfully returned. It's just not rendering the suggestion dropdown box.
Anyone know why that could be?
<input type="text" id="search" data-provide="typeahead" autocomplete="off">
var engine = new Bloodhound({
remote: {
url: '/find?q=%QUERY%',
wildcard: '%QUERY%'
},
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace
});
engine.initialize();
$("#search").typeahead({
hint: true,
highlight: true,
minLength: 0,
source:engine.ttAdapter()
});

Answer 1

Check out my jsfiddle https://jsfiddle.net/yqy995wv/
HTML
<div id="remote">
<input class="typeahead" type="text" placeholder="Oscar winners for Best Picture">
</div>
JS
jQuery(document).ready(function($){
var bestPictures = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'https://twitter.github.io/typeahead.js/data/films/queries/%QUERY.json',
wildcard: '%QUERY'
}
});
$('#remote .typeahead').typeahead(null, {
name: 'best-pictures',
display: 'value',
source: bestPictures
});
});
Your JSON response should be like
[
{
"value": "All Quiet on the Western Front",
},
{
"value": "Gentleman's Agreement",
},
{
"value": "All the Kings Men",
},
{
"value": "All About Eve",
},
{
"value": "An American in Paris",
},
{
"value": "Around the World in 80 Days",
},
{
"value": "The Apartment",
}
]