typeahead 为一个领域工作，而不是另一个领域

马可·雷布萨门

我有一个包含 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 结果上？我不知道...

马可·雷布萨门

问题是被调用的 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>);
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。