Rails AJAXは1つのフィールドエントリに基づいてフォーム全体を自動完成します

Question

私はレールアプリケーションを開発中です。私は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に慣れています。誰も私にこの実装にアプローチする方法のヒントを教えてもらえますか？

Answer 1

まあ、私の予想以上に簡単でした。

Gemのドキュメントを掘り下げた後、extra_dataとupdate_elementsの機能を使用する方法を見つけました。

追加会社コントローラで

：あなたは: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" %> 

が含まれる個々のフィールドに続いて

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

：

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

そして、あなたは余分な各要素にIDを与える観点で

ユーザーが名前フィールドを自動完成すると、すべてのex traデータを取得し、そのIDを対応するフィールドに格納します。

余分なAJAXやjavascriptは必要ありません。この宝石はあなたのために舞台裏で処理します。