render issue in typeahead.js

Question

I'm trying to use typeahead.js 0.10 with bootstrap 3 on an input type text form.

Here is what it renders :

And here is my code :

// instantiate the bloodhound suggestion engine
var numbers = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: [
{ num: 'one' },
{ num: 'two' },
{ num: 'three' },
{ num: 'four' },
{ num: 'five' },
{ num: 'six' },
{ num: 'seven' },
{ num: 'eight' },
{ num: 'nine' },
{ num: 'ten' }
]
});

// initialize the bloodhound suggestion engine
numbers.initialize();

// instantiate the typeahead UI
$('#search').typeahead(null, {
displayKey: 'num',
source: numbers.ttAdapter()
});

I included this file : typeahead.bundle.js to use the typeahead.

and my search form is :

<form class="navbar-form navbar-left visible-lg" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search" id="search">
            </div>
            <button type="submit" class="btn btn-default">Go</button>
            </form>

Any ideas?