Typeahead.js showing only top first record from api/movies

See more:

Javascript

Ajax

I am trying to fetch movies from api/movies. but typeahead.js is getting only the first record from the database and not the others. I put autosuggestion on the text box.

What I have tried:

here is the text box for movie

<pre><div class="form-group">
        <label>Movie</label>
        <input id="movie" type="text" value="" class="form-control" />
    </div>

here is the javascript code for using type a head

var movies = new Bloodhound({
               datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
               queryTokenizer: Bloodhound.tokenizers.whitespace,
               remote: {
                   url: '/api/movies?query=%QUERY',
                   wildcard: '%QUERY'
               }
           });

           $('#movie').typeahead({
               minLenght: 3,
               highlight: true
           }, {
               name: 'movies',
               display: 'name',
               source: movies
           });