如何使带有Bloodhound的Typeahead与JSON响应一起使用？

Question

I am trying to figure out how to get typeahead.js with bloodhound.js to work with my JSON structure. What I want is a type-ahead functionality with a preloaded JSON object which stays in scope. Here are the parts:

Data/All url returns an application/json response with the following structure:

[{"Id":1010,"Name":"Andijvie ", "Category":"Blad- en stengel gewassen"},{"Id":1020,"Name":"Broccoli ","Category":"Blad- en stengel gewassen", (...)]

Furthermore, on the view I have:

<div id="select-crop">
    <input class="typeahead" type="text" placeholder="Select crop">
</div> 

And in JavaScript:

var cropsSuggestionEngine = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.Name);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: {
        url: "/Crop/All",
        filter: function (data) {
            return $.map(data, function(crop) {
                return {
                    value: crop.Name
                };
            });
        }
    }
});

$(function() {

    cropsSuggestionEngine.initialize();

    $('#select-crop .typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    }, {
        name: 'Crops',
        displayKey: 'Name',
        source: cropsSuggestionEngine.ttAdapter(),
        templates: {
            empty: [
            '<div class="empty-message">',
            'unable to find any results that match the current query',
            '</div>'
            ].join('\n'),
            suggestion: Handlebars.compile('<p><strong>{{name}}</strong></p>')
        }
    }); 

});

When something is typed into the typeahead input field it always gives the message that there are not any results that match the query. When I look in the DOM via FireBug I see that datums consists of a long list with empty elements.

I hope someone with bloodhound/typeahead experience can point me in the right direction. I cannot seem to figure it out now. Thanks.

Answer 1

The typeahead can't find any 'Name' keys in the suggestion objects in the prefetched dataset.

When you define the typeahead, you are saying that the 'displayKey' key is "Name". But when you prefect the dataset, your filter function (in the cropSuggestionEngine) returns an array of json objects like this: [{value: "Andijvie "},{value: "Broccoli "}, ...]

So there aren't any "Name" keys.

If you change the filter function to return { Name: crop.Name } , your code works fine.

filter: function(data) {
    return $.map(data, function(crop) {
        return {
            Name: crop.Name
        };
    });
}

Hope it helps!