2016-08-23 3 views
1

У меня есть форма с двумя полями 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 %> 
+0

вопрос, где вы связываете телефонное имя? – kasperite

+0

Вопрос в том, как автозаполнять имя, соответствующее выбранному номеру телефона –

ответ

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 

запрос Аякса

$(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 в поле формы.

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

Смежные вопросы