带有标签的 Typeahead.js 未触发远程请求答案

【问题标题】：Typeahead.js with Tags is not firing remote request带有标签的 Typeahead.js 未触发远程请求
【发布时间】：2016-07-18 14:34:53
【问题描述】：

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

引导程序 3，
引导标签输入 (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'
  }
});

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

我做错了什么？

【问题讨论】：

我知道你说过 Fiddler 没有报告网络流量，但你检查过 Chrome 中的Network 标签了吗？也许有一些浏览器级别的过滤。

标签： javascript jquery twitter-bootstrap typeahead.js

【解决方案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 的请求

【讨论】：