When using Typeahead / Bloodhound with the remote option, when the local / prefetch results are under the “limit” (5), the above sentences are not related to input. He seems to like to show only the top of the results given up to 5.
Photo: "Love" - the expected result, everything else is not connected:

My code is:
var keywords = [
{"value": "Ambient"}, {"value": "Blues"},{"value": "Cinematic"},{"value": "Classical"},{"value": "Country"},
{"value": "Electronic"},{"value": "Holiday"},{"value": "Jazz"},{"value": "Lounge"},{"value": "Folk"},
{"value": "Hip Hop"},{"value": "Indie"},{"value": "Pop"},{"value": "Post Rock"},{"value": "Rock"},{"value": "Singer-Songwriter"},{"value": "Soul"},
{"value": "World"},{"value": "Happy"},{"value": "Sad"},{"value": "Love"},{"value": "Angry"},
{"value":"Joy"},{"value": "Delight"},{"value": "Light"},{"value": "Dark"},{"value": "Religious"},{"value": "Driving"},
{"value":"Excited"},{"value": "Yummy"},{"value": "Delicious"},{"value": "Fun"},{"value": "Rage"},
{"value":"Hard"},{"value": "Soft"}
];
var keywordsEngine = new Bloodhound({
datumTokenizer: function (datum) {
return Bloodhound.tokenizers.whitespace(datum.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: keywords,
remote: {
url: '/stub/keywords.json',
filter: function (keywords) {
return $.map(keywords, function (keyword) {
return {
value: keyword.value
};
});
}
},
prefetch: {
url: '/stub/keywords.json',
filter: function (keywords) {
return $.map(keywords, function (keyword) {
return {
value: keyword.value
};
});
}
}
});
keywordsEngine.initialize();
$('#keyword-search-input').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'keyword',
displayKey: 'value',
source: keywordsEngine.ttAdapter()
});