帶有標簽的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的請求