Here is my code:
tagsProcessor(){
const suggestions = [{value: 'string1'}, {value: 'string2'}, {value: 'string3'}, {value: 'string4'}, {value: 'string5'}]
var bloodhoundSuggestions = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
sufficient: 3,
local: suggestions,
remote: {
url: 'http://localhost:3001/api/suggestions',
}
});
const $tagsInput = $('#tagsInput')
$tagsInput.typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'suggestions',
displayKey: 'value',
source: bloodhoundSuggestions
});
}
}
It's works with local suggestions fine, but it doesn't works with remote for some reason.
The url http://localhost:3001/api/suggestions
returns an array of objects, the similar one to the suggestions
constant.
Why no suggestions from remote shows up in the typeahead input?
I'm getting this error in console right after this function receives remote suggestions:
Uncaught TypeError: Cannot read property 'length' of undefined jQuery.extend.each @ libs.js:358 _.each @ libs.js:17928 processRemote @ libs.js:18763 onResponse @ libs.js:18515 done @ libs.js:18254 jQuery.Callbacks.fire @ libs.js:3148 jQuery.Callbacks.self.fireWith @ libs.js:3260 done @ libs.js:9314 jQuery.ajaxTransport.options.send.callback @ libs.js:9718
Update 1 My remote data is returned by nodeJS server API:
router.route('/suggestions')
.get(function(req, res) {
res.json([{value: 'data10'}, {value: 'data30'}, {value: 'data20'}, {value: 'data40'}, {value: 'data50'}])
});
Update 2 I'm sure I receive the correct answer from server, because i see it in console.log:
var bloodhoundSuggestions = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: suggestions,
remote: {
url: 'http://localhost:3001/api/suggestions',
transform: function(argument) {
console.log('argument', argument)
return argument
}
}
});