Rails AJAX 根据一个字段条目自动完成整个表单答案

【问题标题】：Rails AJAX autocomplete an entire form based on one field entryRails AJAX 根据一个字段条目自动完成整个表单
【发布时间】：2016-09-29 00:24:50
【问题描述】：

我正在开发一个 Rails 应用程序，我对使用 javascript 和 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 非常陌生。谁能给我一些关于如何实现这一点的提示？

【问题讨论】：

标签： javascript jquery ajax ruby-on-rails-4 autocomplete

【解决方案1】：

嗯，答案比我预期的要简单。

在翻阅 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，gem 会在幕后为您处理一切。

【讨论】：