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

时间:2017-05-02 06:28:03

标签: javascript asp.net-mvc razor typeahead

这是我的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"
  }
]

2 个答案:

答案 0 :(得分:0)

尝试将您的预先输入功能替换为以下内容:

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

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

答案 1 :(得分:0)

我发布的上述代码是正确的,但我的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;
    }