2016-09-29 2 views
0

Я работаю над рельсовым приложением, и я очень новичок в использовании javascript и AJAX.Rails AJAX автозаполняет всю форму на основе одного ввода поля

После инструкции здесь: https://github.com/peterwillcn/rails4-autocomplete

Я просто реализовал автозаполнения для одного из полей на моей форме.

Вот форма я работаю с: enter image description here

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

Я понимаю, для этого потребуется какой-то дополнительный 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. Может ли кто-нибудь дать мне несколько советов о том, как подходить к реализации этого?

ответ

0

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

После обработки документации Gem я нашел, как использовать функции extra_data и update_elements.

В контроллере компании добавить:

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

И в представлении вы даете каждый дополнительный элемент идентификатор:

<%= 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" %> 

Теперь, когда пользователь автозаполняет поле «Имя», он использует все ex tra, которые он получил, и помещает их значения в соответствующие поля с правильным id.

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