为一个字段工作而不是另一个字段的预输入答案

【问题标题】：typeahead working for one field but not the other为一个字段工作而不是另一个字段的预输入
【发布时间】：2018-12-20 09:18:06
【问题描述】：

我有一个包含 2 个输入字段的表单，我希望为这两个字段提供自动完成功能，但来源不同。虽然两者的代码基本相同，但它仅适用于一个领域（客户）。如果我使用 postman 手动查询 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 结果？我不知道...

【问题讨论】：

查看您发布的代码，您没有 .on("typeahead:select", function() {...}) 调用电影部分。
是的......这将是无用的，因为选择列表甚至没有弹出

标签： asp.net-mvc-5 twitter-typeahead

【解决方案1】：

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

【讨论】：