即使 api 搜索查询返回值，typeahead.js 自动完成也没有显示任何建议答案

【问题标题】：typeahead.js autocomplete is not showing any suggestions even though api search query is returning the values即使 api 搜索查询返回值，typeahead.js 自动完成也没有显示任何建议
【发布时间】：2017-05-02 06:28:02
【问题描述】：

这是我的 cshtml 文件，我在脚本中使用 typeahead 来加载和自动完成我的文本框，同时输入客户名称。

我可以看到，在客户文本框中输入名称时，会调用我的 API，但没有任何内容显示为下拉菜单。

    <form>
    <div class="form-group">
        <label>Customer</label>
        <input id="customer" type="text" value="" class="form-control" />
    </div>

    <div class="form-group">
        <label>Movies</label>
        <input type="text" value="" class="form-control" />
    </div>

    <button class="btn btn-primary">Submit</button>

</form>

@section scripts
{
    <script>
        $(document).ready(function () {

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

            customers.initialize();

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

这是我的 typeahead.css 文件：

    .typeahead {
    background-color: #fff;
}

.typeahead:focus {
    border: 2px solid #0097cf;
}

.tt-query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999
}

.tt-menu {
    width: 422px;
    margin: 12px 0;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
}

.tt-suggestion:hover {
    cursor: pointer;
    color: #fff;
    background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
    color: #fff;
    background-color: #0097cf;

}

.tt-suggestion p {
    margin: 0;
}

.tt-container {
    position: relative;
}

这是我正在使用的 typeahead js： https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js

我的 API 返回值如下：

[
  {
    "id": 1016,
    "name": "John",
    "isSubscribeToNewsLetter": true,
    "membershipType": {
      "id": 4,
      "signUpFee": 300,
      "durationInMonths": 12,
      "discountRate": 20,
      "subscriptionType": "Yearly"
    },
    "membershipTypeId": 4,
    "birthDate": "1990-10-18T00:00:00"
  }
]

【问题讨论】：

标签： javascript asp.net-mvc razor typeahead

【解决方案1】：

尝试将您的预输入功能替换为以下：

$('#customer').typeahead({
            minLength: 3,
            highlight: true
        },
            {
                name: 'customers',
                displayKey: 'name',
                source: customers.ttAdapter()
            });
    });

我已将“display”更改为“displayKey”并将客户更改为 customers.ttAdapter()。希望对你有帮助:)

【讨论】：

我尝试使用相同的方法，但仍然存在相同的问题。
请帮忙将api函数添加到问题中

【解决方案2】：

我发布的上述代码是正确的，但我的 API 中存在一个问题，这是整个问题的根本原因：

以前的 API：

public IEnumerable<Customer> GetCustomers()
    {
        return _context.Customers.Include(c => c.MembershipType).ToList();
    }

当前 API（工作正常）：

public IEnumerable<Customer> GetCustomers(string query = null)
    {
        var customersQuery = _context.Customers
            .Include(c => c.MembershipType);

        if (!String.IsNullOrWhiteSpace(query))
            customersQuery = customersQuery.Where(c => c.Name.Contains(query));

        return customersQuery;
    }

【讨论】：