Typeahead returns data but doesn't display anything

Question

I have this code for retrieving Locations and I can see that data is returned fine by using console.log. However, it's not being displayed anywhere for the user to choose. I can't figure out what I am missing.

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