代码之家 › 专栏 › 技术社区 › andrey.shedko

Typeahaed.js无法使用WebApi控制器

typeahead.js asp.net-web-api javascript

andrey.shedko · 技术社区 · 10 年前

我正在尝试将Typeahead.js与WebApi Controller一起使用。这似乎是一项简单的任务,但并没有——没有任何工作,没有错误,没有警告,什么都没有。这里是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();
        }
    }
}

控制器返回我所能看到的正确数据,所以我不知道是什么错了。

1 回复 | 直到 10 年前

andrey.shedko 10 年前

@布鲁尼斯,谢谢你的建议,但问题出在客户身上。解决方案如下:

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()
                }
            );