Autocomplete multiple fields with jquery in Rails 5
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?
jquery ruby-on-rails ruby autocomplete
asked Sep 17 '18 at 18:46
JohnnyJohnny
176
add a comment |
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?
jquery ruby-on-rails ruby autocomplete
asked Sep 17 '18 at 18:46
JohnnyJohnny
176
It should work with your code. Check whether the id attribute ofcustomer_nametext_fieldiscustomer_nameor not.
– Pavan
Sep 17 '18 at 18:51
It is, but the autocomplete list still seems to be empty. Do you have any idea of what else may be going wrong? Thanks a lot.
– Johnny
Sep 17 '18 at 22:15
@Johnny A bit confusion with your code is the field namecustomer_phone_numberorphone_numberinCustomermodel?
– Gabbar
Sep 18 '18 at 4:45
add a comment |
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?
jquery ruby-on-rails ruby autocomplete
asked Sep 17 '18 at 18:46
JohnnyJohnny
176
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?
jquery ruby-on-rails ruby autocomplete
jquery ruby-on-rails ruby autocomplete
asked Sep 17 '18 at 18:46
JohnnyJohnny
176
asked Sep 17 '18 at 18:46
JohnnyJohnny
176
asked Sep 17 '18 at 18:46
JohnnyJohnny
176
asked Sep 17 '18 at 18:46
JohnnyJohnny
176
asked Sep 17 '18 at 18:46
JohnnyJohnny
176
176
It should work with your code. Check whether the id attribute ofcustomer_nametext_fieldiscustomer_nameor not.
– Pavan
Sep 17 '18 at 18:51
It is, but the autocomplete list still seems to be empty. Do you have any idea of what else may be going wrong? Thanks a lot.
– Johnny
Sep 17 '18 at 22:15
@Johnny A bit confusion with your code is the field namecustomer_phone_numberorphone_numberinCustomermodel?
– Gabbar
Sep 18 '18 at 4:45
add a comment |
It should work with your code. Check whether the id attribute ofcustomer_nametext_fieldiscustomer_nameor not.
– Pavan
Sep 17 '18 at 18:51
It is, but the autocomplete list still seems to be empty. Do you have any idea of what else may be going wrong? Thanks a lot.
– Johnny
Sep 17 '18 at 22:15
@Johnny A bit confusion with your code is the field namecustomer_phone_numberorphone_numberinCustomermodel?
– Gabbar
Sep 18 '18 at 4:45
It should work with your code. Check whether the id attribute of
customer_name text_field is customer_name or not.– Pavan
Sep 17 '18 at 18:51
It should work with your code. Check whether the id attribute of
customer_name text_field is customer_name or not.– Pavan
Sep 17 '18 at 18:51
It is, but the autocomplete list still seems to be empty. Do you have any idea of what else may be going wrong? Thanks a lot.
– Johnny
Sep 17 '18 at 22:15
It is, but the autocomplete list still seems to be empty. Do you have any idea of what else may be going wrong? Thanks a lot.
– Johnny
Sep 17 '18 at 22:15
@Johnny A bit confusion with your code is the field name
customer_phone_number or phone_number in Customer model?– Gabbar
Sep 18 '18 at 4:45
@Johnny A bit confusion with your code is the field name
customer_phone_number or phone_number in Customer model?– Gabbar
Sep 18 '18 at 4:45
add a comment |
2 Answers
2
active
oldest
votes
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
answered Sep 18 '18 at 4:50
GabbarGabbar
4,0012417
In the Customer model, the field name is phone_number.
– Johnny
Sep 18 '18 at 5:30
@Johnny If its so then why are you usingcustomer_phone_numberinform_for?
– Gabbar
Sep 18 '18 at 5:32
No particular reason. That's just how I'm referencing it in another model, because I thought it would make it confusing to not have customer_, especially for the _name field. Wouldn't it?
– Johnny
Sep 18 '18 at 5:41
ok, so Can you run your query at rails consolecustomer = Customer.order(:phone_number).where("phone_number like ?", "%#{params[:term]}%").limit(5)replaceparams[:term]with yourquery paramand do you get any record there?
– Gabbar
Sep 18 '18 at 5:54
No, it's not returning anything. The way I've managed to make it work with one attribute was by using pluck: render json: @owner.pluck(:phone_number) When I try something similar with map, it doesn't work though.
– Johnny
Sep 18 '18 at 8:55
|
show 2 more comments
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
answered Nov 22 '18 at 15:04
JohnnyJohnny
176
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52374020%2fautocomplete-multiple-fields-with-jquery-in-rails-5%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
answered Sep 18 '18 at 4:50
GabbarGabbar
4,0012417
In the Customer model, the field name is phone_number.
– Johnny
Sep 18 '18 at 5:30
@Johnny If its so then why are you usingcustomer_phone_numberinform_for?
– Gabbar
Sep 18 '18 at 5:32
No particular reason. That's just how I'm referencing it in another model, because I thought it would make it confusing to not have customer_, especially for the _name field. Wouldn't it?
– Johnny
Sep 18 '18 at 5:41
ok, so Can you run your query at rails consolecustomer = Customer.order(:phone_number).where("phone_number like ?", "%#{params[:term]}%").limit(5)replaceparams[:term]with yourquery paramand do you get any record there?
– Gabbar
Sep 18 '18 at 5:54
No, it's not returning anything. The way I've managed to make it work with one attribute was by using pluck: render json: @owner.pluck(:phone_number) When I try something similar with map, it doesn't work though.
– Johnny
Sep 18 '18 at 8:55
|
show 2 more comments
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
answered Sep 18 '18 at 4:50
GabbarGabbar
4,0012417
In the Customer model, the field name is phone_number.
– Johnny
Sep 18 '18 at 5:30
@Johnny If its so then why are you usingcustomer_phone_numberinform_for?
– Gabbar
Sep 18 '18 at 5:32
No particular reason. That's just how I'm referencing it in another model, because I thought it would make it confusing to not have customer_, especially for the _name field. Wouldn't it?
– Johnny
Sep 18 '18 at 5:41
ok, so Can you run your query at rails consolecustomer = Customer.order(:phone_number).where("phone_number like ?", "%#{params[:term]}%").limit(5)replaceparams[:term]with yourquery paramand do you get any record there?
– Gabbar
Sep 18 '18 at 5:54
No, it's not returning anything. The way I've managed to make it work with one attribute was by using pluck: render json: @owner.pluck(:phone_number) When I try something similar with map, it doesn't work though.
– Johnny
Sep 18 '18 at 8:55
|
show 2 more comments
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
answered Sep 18 '18 at 4:50
GabbarGabbar
4,0012417
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
answered Sep 18 '18 at 4:50
GabbarGabbar
4,0012417
answered Sep 18 '18 at 4:50
GabbarGabbar
4,0012417
answered Sep 18 '18 at 4:50
GabbarGabbar
4,0012417
answered Sep 18 '18 at 4:50
GabbarGabbar
4,0012417
4,0012417
In the Customer model, the field name is phone_number.
– Johnny
Sep 18 '18 at 5:30
@Johnny If its so then why are you usingcustomer_phone_numberinform_for?
– Gabbar
Sep 18 '18 at 5:32
No particular reason. That's just how I'm referencing it in another model, because I thought it would make it confusing to not have customer_, especially for the _name field. Wouldn't it?
– Johnny
Sep 18 '18 at 5:41
ok, so Can you run your query at rails consolecustomer = Customer.order(:phone_number).where("phone_number like ?", "%#{params[:term]}%").limit(5)replaceparams[:term]with yourquery paramand do you get any record there?
– Gabbar
Sep 18 '18 at 5:54
No, it's not returning anything. The way I've managed to make it work with one attribute was by using pluck: render json: @owner.pluck(:phone_number) When I try something similar with map, it doesn't work though.
– Johnny
Sep 18 '18 at 8:55
|
show 2 more comments
In the Customer model, the field name is phone_number.
– Johnny
Sep 18 '18 at 5:30
@Johnny If its so then why are you usingcustomer_phone_numberinform_for?
– Gabbar
Sep 18 '18 at 5:32
No particular reason. That's just how I'm referencing it in another model, because I thought it would make it confusing to not have customer_, especially for the _name field. Wouldn't it?
– Johnny
Sep 18 '18 at 5:41
ok, so Can you run your query at rails consolecustomer = Customer.order(:phone_number).where("phone_number like ?", "%#{params[:term]}%").limit(5)replaceparams[:term]with yourquery paramand do you get any record there?
– Gabbar
Sep 18 '18 at 5:54
No, it's not returning anything. The way I've managed to make it work with one attribute was by using pluck: render json: @owner.pluck(:phone_number) When I try something similar with map, it doesn't work though.
– Johnny
Sep 18 '18 at 8:55
In the Customer model, the field name is phone_number.
– Johnny
Sep 18 '18 at 5:30
In the Customer model, the field name is phone_number.
– Johnny
Sep 18 '18 at 5:30
@Johnny If its so then why are you using
customer_phone_number in form_for?– Gabbar
Sep 18 '18 at 5:32
@Johnny If its so then why are you using
customer_phone_number in form_for?– Gabbar
Sep 18 '18 at 5:32
No particular reason. That's just how I'm referencing it in another model, because I thought it would make it confusing to not have customer_, especially for the _name field. Wouldn't it?
– Johnny
Sep 18 '18 at 5:41
No particular reason. That's just how I'm referencing it in another model, because I thought it would make it confusing to not have customer_, especially for the _name field. Wouldn't it?
– Johnny
Sep 18 '18 at 5:41
ok, so Can you run your query at rails console
customer = Customer.order(:phone_number).where("phone_number like ?", "%#{params[:term]}%").limit(5) replace params[:term] with your query param and do you get any record there?– Gabbar
Sep 18 '18 at 5:54
ok, so Can you run your query at rails console
customer = Customer.order(:phone_number).where("phone_number like ?", "%#{params[:term]}%").limit(5) replace params[:term] with your query param and do you get any record there?– Gabbar
Sep 18 '18 at 5:54
No, it's not returning anything. The way I've managed to make it work with one attribute was by using pluck: render json: @owner.pluck(:phone_number) When I try something similar with map, it doesn't work though.
– Johnny
Sep 18 '18 at 8:55
No, it's not returning anything. The way I've managed to make it work with one attribute was by using pluck: render json: @owner.pluck(:phone_number) When I try something similar with map, it doesn't work though.
– Johnny
Sep 18 '18 at 8:55
|
show 2 more comments
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
answered Nov 22 '18 at 15:04
JohnnyJohnny
176
add a comment |
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
answered Nov 22 '18 at 15:04
JohnnyJohnny
176
add a comment |
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
answered Nov 22 '18 at 15:04
JohnnyJohnny
176
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
answered Nov 22 '18 at 15:04
JohnnyJohnny
176
answered Nov 22 '18 at 15:04
JohnnyJohnny
176
answered Nov 22 '18 at 15:04
JohnnyJohnny
176
answered Nov 22 '18 at 15:04
JohnnyJohnny
176
176
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52374020%2fautocomplete-multiple-fields-with-jquery-in-rails-5%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
It should work with your code. Check whether the id attribute of
customer_nametext_fieldiscustomer_nameor not.– Pavan
Sep 17 '18 at 18:51
It is, but the autocomplete list still seems to be empty. Do you have any idea of what else may be going wrong? Thanks a lot.
– Johnny
Sep 17 '18 at 22:15
@Johnny A bit confusion with your code is the field name
customer_phone_numberorphone_numberinCustomermodel?– Gabbar
Sep 18 '18 at 4:45