Rails AJAX根据一个字段条目自动完成整个表单
Rails AJAX根据一个字段条目自动完成整个表单
提问于 2016-09-29 08:24:51
我正在开发一个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非常陌生。有谁能给我一些关于如何实现这一点的提示吗？
回答 1
Stack Overflow用户
发布于 2016-09-30 01:42:23
答案比我预想的要简单。
在深入研究了Gem的文档之后，我发现了如何使用extra_data和update_elements函数。
在Company控制器中添加：
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" %>现在，当用户自动完成Name字段时，它将使用返回的所有额外数据，并将它们的值放入具有正确id的相应字段中。
不需要额外的AJAX或javascript，gem会在幕后为你处理一切。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39759543
复制相关文章
相似问题
腾讯云开发者
