typeahead working for one field but not the other

I have a form with 2 input fields and I whish to provide auto complete for both but from different sources. While it is basically the same code for both it does work only for one field (customer). If I query the API manually with postman I get the data as expected.

This is the Form

@model dynamic

@{
    ViewBag.Title = "New Rental Form";
}

<h2>New Rental Form</h2>
<form>
    <div class="form-group">
        <label>Customer</label>
        <input id="customer" type="text" value="" class="form-control" />
    </div>
    <div class="form-group">
        <label>Movie</label>
        <input id="movie" type="text" value="" class="form-control" />
    </div>
    <button class="btn btn-primary">Submit</button>
</form>
@section scripts
{
    <script>
        $(document).ready(function () {
            var vm = {};

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

            $('#customer').typeahead({
                minLength: 3,
                highlight: true
            },
                {
                    name: 'customers',
                    display: 'name',
                    source: customers
                }).on("typeahead:select",
                    function (e, customer) {
                        vm.customerId = customer.id;
                });

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

             $('#movie').typeahead({
                    minLength: 3,
                    highlight: true
                },
                    {
                        name: 'movie',
                        display: 'name',
                        source: movies
                    });
            })
    </script>
}

It's only working for the 'Customer' Field. Also in Visual Studio I can see that the query is done. So maybe the problem is parsing the API result? I don't know...

The problem was that the called API did not actually filter the list. It always returned the full list of movies. As it seems typeahead does not display a Selection if there are too many results. So I all I had to do is implementing the parameter that receives the value of %QUERY and actually filter the list.

public IEnumerable<MovieDto> GetMovies(string query = null)
{
    var moviesQuery = _context.Movies
        .Include(m => m.Genre)
        .Where(m => m.AmmountAvailable > 0);

     if (!string.IsNullOrWhiteSpace(query))
        moviesQuery = moviesQuery.Where(m => m.Name.Contains(query));

    return moviesQuery
        .ToList()
        .Select(Mapper.Map<Movie, MovieDto>);
}