Qfyilyi

I am building an admin form where I am using Jquery's Autocomplete widget for one of the text fields.

In a field called customer_phone_number, when someone types the phone number, autocomplete checks the database to see if it exists and lists the existing options. Once a phone number is selected, I want it to fill out another field called customer_name. I've managed to autocomplete the first one but not the other. Here's what my code looks like right now:

This is the View:

<div class="col-md-4 input">

  <div class="form-group">

    <label>Customer's Phone Number</label>

    <%= f.text_field :customer_phone_number, class: "form-control", data: { autocomplete_source: customers_path }  %>

  </div>

</div>

<div class="col-md-4 input">

  <div class="form-group">

    <label>Customer's Name</label>

    <%= f.text_field :customer_name, class: "form-control", data: { autocomplete_source: customers_path }  %>

  </div>

</div>

The javascript file:

jQuery(function() {



  return $('#customer_phone_number').autocomplete({

    source: $('#customer_phone_number').data('autocomplete-source'),

    select: function(event, ui) {

      event.preventDefault(),

      $(this).val(ui.item.phone_number),

      $('#customer_name').val(ui.item.name);

    }

  });

});

And Controller:

  def index

    @customer = Customer.order(:phone_number).where("phone_number like ?", "%#{params[:term]}%").limit(5)

    render json: @customer.map{ |customer| { :phone_number => customer.phone_number, :name => customer.name } }

    # render json: @customer.pluck(:phone_number, :name)



  end

How can I pass the :name value to the customer_name field?

Probably you are fetching wrong query as in form field name is customer_phone_number and in query its phone_number

Assuming in Customer model field name is customer_phone_number then query should be

def index

    @customer = Customer.order(:customer_phone_number).where("customer_phone_number like ?", "%#{params[:term]}%").limit(5)

    render json: @customer.map{ |customer| { :phone_number => customer.customer_phone_number, :name => customer.name } }



end

I've managed to make it work using a different method with the rails-jquery-autocomplete gem:

https://github.com/risuiowa/rails-jquery-autocomplete/

Using the

autocomplete_field

turned out to be much easier to implement.
Example:

form_for @product do |f|

  f.autocomplete_field :brand_name, autocomplete_brand_name_products_path

end