javascript - Twitter Bootstrap Typeahead gon gem 并将数据从模型传递到 JS - 以 json 格式

Question

我希望将我的“公司”名称传递到表单上的自动完成输入中。

我正在使用 twitter bootstrap 和 gon gem 将数据传递到 Json 并使其可供 js 使用。

但是我无法让字段做出响应，我认为数据不可用于表单，也不明白为什么。

我的公司 Controller 执行以下操作，将公司名称分配给 gon 变量。

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

我的 Application.html.erb 在其 header 中包含以下内容，以使 gon 变量可用于 js。

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

然后我有了想要为其分配 typeahead 的表单，我已为其分配了 class="typeahead"。

<%= 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 bootstrap 文档记录相关的 jquery。

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

我的应用程序 .js 还具有以下库

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

我已检查 gon.firms 是否可用作变量，但开发控制台出现以下错误

uncaught syntax error: Unexpected token

有什么想法可能导致这种情况吗？

有什么明显错误吗？

Answer 1

首先确保 gon.firms 已按您的预期填充(检查您的 Web 开发工具控制台)。然后，当您在框中输入内容时，请确保没有 js 错误。最后，根据the docs ，看起来您想将插件附加到文本字段，而不是表单:

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