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

不确定如何建立姓名和电话号码之间的关系，但您可以自动填写自动填充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

Answer 2

解决方案是修改两者：

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();

并将ID patient_name添加到表单字段。

动态表单 - 根据以前的自动完成自动填充字段

2 个答案: