title: Twitter Bootstrap Typeahead gon gem and passing data from model into JS - in json format
body: <p>I would like the names of my 'firms'to be passed into an auto completing typeahead on a form.</p>
  
  <p>I am using twitter bootstrap and the gon gem to pass the data into Json and make it available to the js.</p>
  
  <p>However i cannot get the field to respond, i dont think that the data is available to the form and do not understand why.</p>
  
  <p>my firms controller does the following assigning the names of the firms to a gon variable.</p>
  
  <pre><code>gon.firms = Firm.all.map &amp;:name
  </code></pre>
  
  <p>My Application.html.erb has the following in its header to make the gon variable available to js.</p>
  
  <pre><code>&lt;%= include_gon %&gt;
  &lt;script type="text/javascript"&gt;
      jQuery(document).ready(function() {
          $(.typeahead).typeahead({source:gon.firms});
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>Then I have the form that I would like assign the typeahead to, I have assigned the class="typeahead" to it.</p>
  
  <pre><code>&lt;%= form_tag firms_path, :method =&gt; 'get', :class =&gt; 'typeahead'  do %&gt;
  &lt;%= text_field_tag :search, params[:search], :class =&gt; 'input-medium search-query', :placeholder =&gt; 'Firm name' %&gt;
  &lt;%= submit_tag "Search", :name =&gt; nil ,:class =&gt; 'btn' %&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>Finally the application.js file the relevant jquery as per the twitter bootstrap documentation.</p>
  
  <pre><code>$(function() {  
      $('.typeahead .input-medium search-query').typeahead({source:[gon.firms]});
  }
  </code></pre>
  
  <p>My application .js also has the following libraries</p>
  
  <pre><code>//= require jquery
  //= require jquery_ujs
  //= require jquery-ui
  //= require twitter/bootstrap
  //= require_tree .
  </code></pre>
  
  <p>I have checked that gon.firms is available as a variable, but the dev console has the following error</p>
  
  <pre><code>uncaught syntax error: Unexpected token
  </code></pre>
  
  <p>any ideas what may be causing this?</p>
  
  <p>Is there anything obviously wrong?</p>