Typeahead.js與標籤不發射遠程請求

我有一個網頁。在該頁面中，我使用的是：Typeahead.js與標籤不發射遠程請求

引導3，
引導-tagsinput（0.8.0）
bootstrap3-預輸入（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錯誤。出於這個原因，我似乎有東西配置不正確。然而，一切看起來都正確。

我在做什麼錯？

來源

2016-07-18 Zach Templeton

我知道你說的提琴手報道沒有網絡流量，但你有沒有檢查Chrome中的「網絡」選項卡？也許有一些瀏覽器級別的過濾。 –

我想你可能在腳本的順序上有問題。

瀏覽器加載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

來源

2016-07-20 19:38:56 Dekel

Typeahead.js與標籤不發射遠程請求

回答

相關問題