Typeahead返回数据但不显示任何内容

Question

我有这个代码用于检索位置，我可以看到使用console.log可以很好地返回数据。但是，它没有显示在任何地方供用户选择。我无法弄清楚我错过了什么。

<input id="cl_HotelLocation" name="cl_HotelLocation" type="text" placeholder="Where to?" class="input-xlarge form-control typeahead">

var locations = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.name);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 5,
    remote: {
        url: "/api/typeahead/search/",
        replace: function(url, query) {
            return url + query;
        },
        filter: function (locations) {
            return $.map(locations, function (data) {
                console.log("1", data);
                return {
                    tokens: data.tokens,
                    symbol: data.LocationId,
                    name: data.LocationName+ ", " + data.regionName + ", " + data.countryName
                }
            });
        }
    }
});

locations.initialize();

$('.typeahead').typeahead(null, {
    name: 'locations',
    displayKey: 'name',
    minLength: 3, // send AJAX request only after user type in at least X characters
    source: locations.ttAdapter()
});