2015-11-20 9 views
13

タイプ先読み機能は、想定されるところで機能します。しかし、問題は、先読み機能が、特定の1つのリクエストに対して実際にしか発生しない場合に、データのリクエストごとにJSONリクエストを作成することです。Typeahead in rails app:プリフェッチを介してすべてのリクエストにJSONリクエストを追加するのではなく、特定のリクエストにJSONリクエストを追加します。

私は、次のコントローラがあります。私は私のjavascriptのファイルに次き

#controllers/agencies_controller.rb 
class AgenciesController < ApplicationController 

    def get_unique_agency_names 
    @unique_agency_names = Agency.uniq.pluck(:name) 
    respond_to do |format| 
     format.json { render json: @unique_agency_names } 
    end 
    end 
    ... 
end 

を:

#app/assets/javascripts.agencies/index.js 
$(document).ready(function(){ 
    /* For typeahead functionality on name input of search form for agencies */ 
    var agency_names = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.whitespace, 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    prefetch: '../agencies/get_unique_agency_names.json' 
    }); 

    $('#prefetch .typeahead.name_input').typeahead(null, { 
    name: 'agency_names', 
    source: agency_names 
    }); 
}); 

そして、ちょうど完了のため、ここで私は、この機能が起こるしたい一つの場所があります:この形式で:

# just showing the relevant part of the form 
<div class="form-group" id="prefetch"> 
    <%= f.label :name_cont, "Agency Name" %> 
    <%= f.text_field :name_cont, class: "form-control typeahead name_input", placeholder: "Enter Agency Name" %> 
</div> 

の私の関連ルートです

resources :agencies do 
    collection do 
    get 'get_unique_agency_names' 
    end 
end 

私の具体的な質問は:どのように私はそれが想定されたときにGET "/agencies/get_unique_agency_names"にのみ呼び出されることを保証することができますか?今はすべてのリクエストに対してこのJSONリクエストを追加しています。 1つの特定のリクエストに対してJSONリクエストを発生させたいだけです。

Twitter's Type Ahead Examples

+1

「プリフェッチ」のものではありませんか? "プリフェッチされたデータは初期化時にフェッチされ、処理されます。" –

+0

@DaveNewton私はそれについて考えていました。私はその場所に置くはずのものがわからない。 – Neil

+2

プリフェッチしませんか?意味のあるページのプリフェッチのみですか? Bloodhoundレポには、使用できるプリフェッチオプションがリストされています。すべてのリクエストにこのJSが含まれていることを意味していれば、それは重要ではないページにも含まれています。絶対的でないURLは、あなたのページにURLを追加することを意味します。 –

答えて

3

私が有効になって、ソースデータが生成される場合は、この

$('#prefetch .typeahead.name_input').typeahead(null, { 
    generateOnLoad:false, 
    name: 'agency_names', 
    source: agency_names 
    }); 

generateOnLoad{boolean型}

ヌル(デフォルト)

が必要だと思います(Ajaxリクエストを行い、データを準備する入力のフォーカスを待つのではなく、ページのロード時に検索されます)。

PN:このオプションは、他の設定が調整されていない限り、dynamic:trueとうまく動作しません。

はまた、あなたがレールマニフェストファイルを見つけた場合は、すべてのページへの通話を追加するだけの要素をチェックする先行型の前に存在してバインドされます。

if($('#prefetch .typeahead.name_input').length){ 
     $('#prefetch .typeahead.name_input').typeahead(null, { 
     generateOnLoad:false, 
     name: 'agency_names', 
     source: agency_names 
     }); 
} 
3

私は「制限」要求のための戦略を示唆しているのではなく、大量のデータセットを処理しているように見えるため、プログラムによる1つのリクエストの実施が可能です。できるだけキャッシュできるようにBloodhoundのprefetchオプションを設定し、sufficientremoteのオプションを設定して、JSONファイルに対するリクエストが確実に埋め戻され、レート制限されるようにすることができます。最後の防衛線としてTypeaheadのminLengthオプションの値を高く設定します。

は、容量が制限されているブラウザのキャッシュ用ローカルストレージに依存するため、ある程度役立ちます。データセットが大きい場合は、一部のみをキャッシュし、初期化後にさらに要求が必要になります。

は、初期化後に要求を処理し、これらの要求をデバウンスまたは抑制して、要求の数を減らすことができます。urlrateLimitBy、およびrateLimitWaitオプションを参照してください。これは、remoteにハッシュとして割り当てることができます。さらに、sufficientデータ数に達していない場合、Bloodhoundはremoteを使用して追加のデータムをバックフィルします。

最後にnullを渡さずに、minLengthオプションをTypeaheadコンストラクタのデフォルトの1よりも高い値に設定してください。これにより、データセットの検索が過度に行われなくなります。 minLengthの値ができるだけ小さい、可能な結果の長さよりも短いことを確認してください。

関連する問題