動態表單 - 自動填充字段基於以前的自動完成

Question

我有一個表格有兩個字段phone和name我想要的是當用戶選擇使用ajax自動完成的電話號碼名稱字段將自動填充相應的名稱到那個電話號碼。

看着Railscasts episode我能夠使ajax自動完成工作，任何干淨的方式做自動填充？

patients_controller

class PatientsController < ApplicationController 
    def index 
    @patients = Patient.order(:phone).where('phone like ?', "%#{params[:term]}%") 
    json_data = @patients.map(&:phone) 
    render json: json_data 
    end 
end 

reservations.coffee

$(document).ready -> 
    $('#patient_phone').autocomplete 
    source: "/patients/index" 

_form.erb

<%= f.fields_for :patient, appointment.patient do |patient| %> 
    <%= patient.text_field :phone, id: 'patient_phone' %> 
    <%= patient.text_field :name %> 
    <%= f.submit %> 
<% end %> 

Answer 1

解決的辦法是修改這兩個：

的index行動

def index 
    @patients = Patient.order(:phone).where(
       'phone like ?', "%#{params[:term]}%") 
    render :json => @patients.collect { 
        |x| {:label => x.phone, 
         :value => x.phone, 
         :name => x.name} 
         }.compact 
end 

Ajax請求

$(document).ready -> 
    $('#patient_phone').autocomplete 
    source: "/patients/index", messages: noResults: '', 
      results: func = -> '' 
    select: (event, ui) -> $("#patient_name").val(ui.item.name) 
    focus: (event, ui) -> $(".ui-helper-hidden-accessible").hide(); 

並添加標識patient_name添加到表單字段。

Answer 2

不知道你如何建立與姓名和電話號碼的關係，但你可以自動填寫名稱內部自動完成select像這樣的事件

$(document).ready -> 
    $('#patient_phone').autocomplete 
    source: "/patients/index" 
    select: (event, ui) -> 
     selected_phone_number = $(event.target).val() 
     // Fill in value for name field here 

參見：http://api.jqueryui.com/autocomplete/#event-select