Rails AJAX автозаполнение всей формы на основе одной записи поля

Я работаю над приложением 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, чтобы получить идентификатор объекта компании из автозаполнения, а затем с помощью этого объекта заполнить оставшиеся поля.

Как я уже сказал, Я очень новичок в javascript и AJAX. Кто-нибудь может дать мне несколько советов о том, как подойти к реализации этого?

1 ответ

  1. Ну, ответ был проще, чем я ожидал.

    Покопавшись в документации драгоценного камня, я нашел, как использовать 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" %>
    

    Теперь, когда пользователь автоматически заполняет поле Name, он использует все дополнительные данные, которые он получил обратно, и помещает их значения в соответствующие поля с правильным идентификатором.

    Никаких дополнительных AJAX или javascript не требуется, gem обрабатывает все это за кулисами для вас.