0

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

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

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

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

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

我的 Application.html.erb 在其标头中有以下内容，以使 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 %>

最后，根据 twitter 引导文档，application.js 文件相关的 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

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

有什么明显的错误吗？

4

2 回答 2

1

首先确保gon.firms按照您的预期填充（检查您的 Web 开发工具控制台）。然后，当您在那里时，请确保您在框中键入时没有 js 错误。最后，根据docs，您似乎想将插件附加到文本字段，而不是表单：

$('.typeahead .search-query').typeahead( { source: gon.firms } );
于 2012-04-14T12:40:56.740 回答
1
这是因为 gon.firms 是 ruby​​ 数组而不是 js 数组。

您可以将字符串传输到 js，然后将其拆分为这样的数组： 

$(function() {
    var col = "<%= @pon.firms.join(",") %>".split(",");
    $(".search-query").typeahead({ source: col });
});
于 2012-04-25T06:33:11.103 回答