Twitter Bootstrap Typeahead gon gemとモデルからJSへのデータの受け渡し - json形式

Question

私の 'firm'の名前は、フォーム上で自動補完型に渡されることを希望します。

私はtwitterのブートストラップとgon gemを使ってデータをJsonに渡し、jsで利用できるようにしています。

しかし、私は応答するフィールドを取得することはできません、私はデータがフォームに利用可能であるとは思わない、なぜ理解していない。

私の会社のコントローラーは、会社の名前をgon変数に代入して次のようにします。

gon.firms = Firm.all.map &:name 

My Application.html.erbには、gon変数をjsで使用できるようにするために、ヘッダーに次のものがあります。

<%= include_gon %> 
<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     $(.typeahead).typeahead({source:gon.firms}); 
    }); 
    </script> 

それから私は、私は、私はそれにクラス=「先行入力」を割り当てた先行入力を割り当てたい形を持っています。

<%= form_tag firms_path, :method => 'get', :class => 'typeahead' do %> 
<%= text_field_tag :search, params[:search], :class => 'input-medium search-query', :placeholder => 'Firm name' %> 
<%= submit_tag "Search", :name => nil ,:class => 'btn' %> 
<% end %> 

最後に、application.jsファイルには、twitterブートストラップのドキュメントに関連するjqueryがあります。

$(function() { 
    $('.typeahead .input-medium search-query').typeahead({source:[gon.firms]}); 
} 

マイアプリの.js

も、私はgon.firmsが変数として利用可能であることを確認している

//= require jquery 
//= require jquery_ujs 
//= require jquery-ui 
//= require twitter/bootstrap 
//= require_tree . 

以下のライブラリを持っていますが、DEVコンソールには、次のようなエラーがあり

uncaught syntax error: Unexpected token 

何が原因なのでしょうか？

明らかに間違っていますか？

Answer 1

最初にgon.firmsが入力されていることを確認してください（Web開発ツールコンソールにチェックインしてください）。その後、ボックスに入力するときにjsエラーがないことを確認します。テキストフィールドではなく、フォームにプラグインを添付するように最後に、the docsあたりとして、それが見えます：

$('.typeahead .search-query').typeahead({ source: gon.firms }); 

Answer 2

gon.firmsはRubyの配列ではないjsの配列であるためです。

あなたはJSに文字列をtranferし、このような配列にそれを分割することができます試してみて、私はこれを並べ替える助けるために時間を割いていただきありがとうございますが、私はその時にはbashを持っている、あなたが知っているものと

$(function() { 
    var col = "<%= @pon.firms.join(",") %>".split(","); 
    $(".search-query").typeahead({ source: col }); 
});