typeahead работает для одного поля, но не для другого - PullRequest
Новая
       34

typeahead работает для одного поля, но не для другого

0 голосов
/ 20 декабря 2018

У меня есть форма с 2 полями ввода, и я хочу предоставить автозаполнение для обоих, но из разных источников.Хотя это в основном один и тот же код для обоих, он работает только для одного поля (заказчика).Если я запрашиваю API вручную с помощью почтальон , я получаю данные, как ожидалось.

Это форма 

@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>
}

Это работает только для поля «Клиент».Также в Visual Studio я вижу, что запрос выполнен.Так что, возможно, проблема заключается в анализе результата API?Я не знаю ...

1 Ответ

0 голосов
/ 21 декабря 2018

Проблема заключалась в том, что вызываемый API фактически не фильтровал список.Всегда возвращался полный список фильмов.Как кажется, typeahead не отображает выделение, если результатов слишком много.Поэтому все, что мне нужно было сделать, это реализовать параметр, который получает значение %QUERY и фактически фильтровать список. 

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>);
}
...