带有标签的Typeahead.js无法触发远程请求

Question

我有一个网页。 在此页面中，我正在使用：

• 自举3
• bootstrap-tagsinput（0.8.0）
• bootstrap3-typeahead（v4.0.1）
• typeahead.js（0.11.1）

在我的网页中，我有以下内容（ 此处是Fiddle ）：

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

由于某种原因，它从不向我的服务器发出请求以获取建议。 我打开了提琴手，并且在文本字段中输入内容时看不到任何东西。 同时，我在控制台窗口中没有看到任何JavaScript错误。 因此，似乎我的配置不正确。 然而，一切看起来都是正确的。

我究竟做错了什么？

Answer 1

我认为您可能对脚本的顺序有疑问。

浏览器加载javascript文件的顺序非常重要。

 // 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="" /> 

请注意，该代码不会执行任何操作，但是如果您使用chrome的开发人员工具进行检查，则会看到对/api/suggestions/find的请求