Typeahead.js 不适用于 Web Api 控制器答案

【问题标题】：Typeahaed.js not working with WebApi ControllerTypeahead.js 不适用于 Web Api 控制器
【发布时间】：2014-08-19 11:12:33
【问题描述】：

我正在尝试将 Typeahead.js 与 WebApi 控制器一起使用。这似乎是一个简单的任务，但没有 - 没有任何工作，没有错误，没有警告，什么都没有。这是JS部分：

<script>
        $(document).ready(function () {
            $('#hotel_dest').typeahead({
                name: 'CitySearch',
                minLength: 3,
                highlight: true,
                valueKey: "destination",
                remote: {
                    url: 'http://localhost:63270/api/citysearch?q=%QUERY',
                    filter: function (response) {
                        return response;
                    }
                },
                limit: 10
            });
</script>

这是一个非常简单的控制器：

namespace Booking.Controllers
{
    public class CitySearchController : ApiController
    {
        hotelbedsEntities db = new hotelbedsEntities();
        public class CitySearch
        {
            public string destination { get; set; }
        }
        public IQueryable<CitySearch> GetDestination(string q)
        {
            var a = from b in db.LocalizedDestination
                    join c in db.LocalizedCountryName on b.HBCountryCode equals c.HBCountryCode
                    where b.DestinationRusName.Contains(q)
                    select new CitySearch
                    {
                        destination = b.DestinationRusName + "(" + b.HBDestinationCode + ")" + c.RusCountryName
                    };
            return a.AsQueryable();
        }
    }
}

据我所知，控制器返回正确的数据，所以我不知道出了什么问题。

【问题讨论】：

你应该返回一个项目列表，或者至少一个 Enumerable，而不是一个可查询的。您不能推迟加载，直到查询到达网页:)

标签： javascript asp.net-web-api typeahead.js

【解决方案1】：

@Brunis，感谢您的建议，但问题出在客户端。解决方法如下：

var citylist = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('destination'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                limit: 10,
                remote: 'http://localhost:63270/api/citysearch?q=%QUERY'
            });
            citylist.initialize();
            $('#hotel_dest').typeahead({
                hint: true,
                highlight: true,
                minLength: 1
            },
                {
                    name: 'destination',
                    displayKey: 'destination',
                    source: citylist.ttAdapter()
                }
            );

【讨论】：