Typeahead.js with Tags 未触发远程请求

Question

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

Bootstrap3,
bootstrap-tagsinput (0.8.0)
bootstrap3-typeahead (v4.0.1)
typeahead.js (0.11.1)

在我的网页中，我有以下 (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'
  }
});

出于某种原因，它从不向我的服务器发出请求以获取建议。我打开了提琴手，在文本字段中输入内容时没有看到任何内容。同时，我在控制台 window 中没有看到任何 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="" />

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

Typeahead.js with Tags 未触发远程请求

Typeahead.js with Tags is not firing remote request

javascript

jquery

twitter-bootstrap

typeahead.js