Rails AJAX自动完成基于一个字段条目的整个表单

我正在开发一个Rails应用程序，我对使用JavaScript和AJAX很新。Rails AJAX自动完成基于一个字段条目的整个表单

继这里说明：https://github.com/peterwillcn/rails4-autocomplete

我只是实现自动完成对我的窗体上的领域之一。

这是我的工作形式：

我想现在要做的，就是当用户选择自动完成的，我想公司其余字段与对象的填充相应的值。

我知道这将需要某种额外的JavaScript和AJAX来实现。

我使用了自动完成JavaScript函数是：

$(function() { 
    var companies = <%Company.all.collect{|company| company.name}%> 
    $("#jobCompany").autocomplete({ 
     source: companies 
    }); 
    });

而对于我的表单代码：

<%= form_for(@job) do |f| %> 
    <%= f.hidden_field :date, :value=>Time.now %> 
    <%= f.hidden_field :user_id, :value=>current_user.id %> 

    <%= f.fields_for :company, @company do |company| %> 
     <%= company.autocomplete_field :name, autocomplete_company_name_companies_path, placeholder: "Company Name" %> 
     <%= company.text_field :phone, placeholder: "Company Phone" %> 
     <%= company.text_field :street, placeholder: "Street" %> 
     <%= company.text_field :city, placeholder: "City" %> 
     <%= company.select :state, options_for_select(@states, @states[4]) %> 
     <%= company.text_field :zip, placeholder: "Zip" %> 
     <%= company.text_field :email, placeholder: "Company Email" %> 
     <%= company.text_field :website, placeholder: "Company Website" %> 
    <% end %> 
<% end %>

我想什么，是我将需要某种形式的AJAX来从自动完成获取公司对象ID，然后使用该对象填充剩余的字段。

正如我所说，我是非常新的JavaScript和AJAX。任何人都可以给我一些关于如何实现这个方法的提示吗？

来源

2016-09-29 Cody Pritchard

那么答案是比我预期的更简单。

在深入了解Gem的文档之后，我发现如何使用extra_data和update_elements函数。

在公司控制添加：

autocomplete :company, :name, :extra_data => [:phone, :street, :city, :zip, :email, :website]

并在视图你给每个额外元素的ID：

<%= company.autocomplete_field :name, autocomplete_company_name_companies_path, 
              :update_elements => {:id => '#id_element', 
                   :phone => '#phone_element', 
                   :street => '#street_element', 
                   :city => '#city_element', 
                   :zip => '#zip_element', 
                   :email => '#email_element', 
                   :website => '#website_element'}, placeholder: "Company Name" %>

然后在每个单独的领域，你包括:id

<%= company.text_field :phone, id: 'phone_element', placeholder: "Company Phone" %> 
<%= company.text_field :street, id: 'street_element', placeholder: "Street" %> 
<%= company.text_field :city, id: 'city_element', placeholder: "City" %> 
<%= company.text_field :zip, id: 'zip_element', placeholder: "Zip" %> 
<%= company.text_field :email, id: 'email_element', placeholder: "Company Email" %> 
<%= company.text_field :website, id: 'website_element', placeholder: "Company Website" %>

现在，当用户自动完成名称字段时，它使用所有的前传回它返回的数据，并将它们的值放在具有正确ID的相应字段中。

没有额外的AJAX或JavaScript需要，宝石处理它在幕后为你。

来源

2016-09-29 17:42:23

Rails AJAX自动完成基于一个字段条目的整个表单

回答

相关问题