Typeahead.js with Tags is not firing remote request

Question

I have a web page. In this page, I'm using:

• Bootstrap 3,
• bootstrap-tagsinput (0.8.0)
• bootstrap3-typeahead (v4.0.1)
• typeahead.js (0.11.1)

In my web page, I have the following ( Fiddle here ):

<input id="MyChoices" class="form-control" type="text" placeholder="" // Initialize the tag piece 
$('#MyChoices').tagsinput({
  typeaheadjs: {
    source: suggestions,
    afterSelect: function() {
      this.$element[0].value = '';
    }
  }
});autocomplete="off" spellcheck="false" value="" />
// Connect the lookup endpoint
var suggestions = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  sufficient: 3,
  remote: {
    url: '/api/suggestions/find'
  }
});

For some reason, it never fires a request to my server to get the suggestions. I have fiddler open and I do not see anything coming across as I enter things into the text field. At the same time, I do not see any JavaScript errors in the console window. For that reason, it seems like I have something configured incorrectly. Yet, everything looks correct.

What am I doing wrong?

Answer 1

I think you might had a problem with the order of the scripts.

The order the browser loads the javascript files is very important.

 // Connect the lookup endpoint var suggestions = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), queryTokenizer: Bloodhound.tokenizers.whitespace, sufficient: 3, remote: { url: '/api/suggestions/find' } }); // Initialize the tag piece $('#MyChoices').tagsinput({ typeaheadjs: { source: suggestions, afterSelect: function() { this.$element[0].value = ''; } } }); 

 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput-typeahead.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script> <input id="MyChoices" class="form-control" type="text" placeholder="" autocomplete="off" spellcheck="false" value="" /> 

Note that the code will do nothing, but if you will check with chrome's Developers Tools you will see the request to /api/suggestions/find