Typeahead with bloodhound remote suggestions

Question

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

Answer 1

An example of your code working with a remote data source is here:

https://jsfiddle.net/ka0v6bg7/

Try searching for strings beginning with "data" or "string" (note, querying for "data" will take a little longer as it's a remote datasource!)

The only thing I've changed is the remote datasource.

Hence things to check are:

1) That you are correctly referencing typeahead. Try referencing it from here:

https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js

as a test.

2) The Jquery error suggests that it may not be referenced correctly. Again, as a test try referencing JQuery from here:

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js