タグ付きTypeahead.jsはリモートリクエストを発していません

Question

私はウェブページを持っています。このページでは、私が使用しています：

• ブートストラップ3、
• ブートストラップ・tagsinput（0.8.0）
• bootstrap3-先行入力（V4.0.1）
• typeahead.js（0.11.1を私のWebページで）

、I）は、下記（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のエラーは表示されません。そのため、私は何かが正しく設定されていないようです。しかし、すべてが正しいように見えます。

私は間違っていますか？

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