外部ファイルを使用してブートストラップ3のためのTypeaheadを正しくリンクして有効にするにはどうすればよいですか？

Question

私はthis exampleを持っていて、JavaScriptを使ってloooooong行のコメントが外されているという条件のもとで動作します。 （私はそれが先行入力のためのスクリプトです推測している。）もちろん

!function(a){...} 
$('#query').typeahead({ local: ['alpha','bravo','charlie'] }); 

<div class="form-group"> 
    <input class="form-control" name="query" id="query" type="text">    
</div> 

、私はその行があることを望んでいません。代わりに、（HTMLのコメントアウトされた行で）外部的にリンクしようとしましたが、バンドルの一部にしました。

質問は、スクリプトファイルのすべての内容を明示的に私のコードに押し込む必要なしに、この例で先行入力作業を行う方法です。

Answer 1

bootplyは外部ライブラリでの作業には適していないようです。私はBootstrapの特定のものにしか使用していないので、私は確信していません。

I explicitly added a link to jQueryこれはjQueryに関連するエラーを停止しますが、先読みの実装を修正しません。実行するときにブラウザの開発ツールを調べると、JavaScriptに関連するエラーが表示されます。問題のbootplyがTypeahead.jsでサポートされていないバージョンのJavaScriptを参照していたと思います。

私は一度も使用していないバージョン0.9.3（いくつかのバージョン前）を使用していましたが、現在のドキュメントでは参照されていません。そのため、現在のリリース（1.11）での使用に関するいくつかの情報が含まれています。

Here is an example on jsfiddleあなたの例と基本的に同じでなければなりません。

変更するために必要ないくつかの事がありました：

先行入力のための基本的な宣言は、オプションであることjQuery#typeahead(options, [*datasets])', with datasets`です。私が使用する例は、オプションのハッシュとデータセット定義の両方で先行入力を宣言することである：bloodhoundを使用する場合

$('#query').typeahead({ 
    hint: true, 
    highlight: true, 
    minLength: 1 
}, { 
    name: 'states', 
    source: substringMatcher(vals) 
}); 

先行入力とlocalへの参照のみです。 bloodhoundとローカルデータソースを使用して、

Here is an exampleです。

違いは、ブラッドハウンドのインスタンスを宣言することである。その後、

var states = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.whitespace, 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    // `states` is an array of state names defined in "The Basics" 
    local: globalResults 
}); 

そして、先行入力にそのインスタンスを与える：ここで

$('#search-input').typeahead({ 
    hint: true, 
    highlight: true, 
    minLength: 1 
}, { 
    name: 'myMatches', 
    source: states 
}); 

はあなたにもう少し洞察力を与える可能性があるthe docs for typeaheadです。