In my application I have a drop-down, I want to input a value in a text-field and while inputting it the drop-down should display the option for auto-completing it. Following is the code snippet
<%= f.label :patient_id %>
<%= f.collection_select(:patient_id, Patient.all, :id, :patient_identity, {:prompt => "Select patient"}, :selected => @vital.patient_id, required: true) %>
In the above code I have the drop-down that display all the option. What
changes or what tag should I have to use input-text field and it’s auto-complete feature.
Hi Deepak,
Generally I prefer chosen.js for static select list. It works out of the box simply by adding 'chosen-select' class to select tag. If your list is massivly big ajax-chosen.js is best choice. You can filer select result by sending search query to server when user start typing on the text box.
https://harvesthq.github.io/chosen/
There is also typeahead-rails gem. It is also based on js solution which I haven't tried but worth for you to look at.
Thanks
Anand
In my application I have a drop-down, I want to input a value in a text-field and while inputting it the drop-down should display the option for auto-completing it. Following is the code snippet
<div class="field">
<%= f.label :patient_id %><br>
<%= f.collection_select(:patient_id, Patient.all, :id, :patient_identity, {:prompt => "Select patient"}, :selected => @vital.patient_id, required: true) %>
</div>
In the above code I have the drop-down that display all the option. What changes or what tag should I have to use input-text field and it's auto-complete feature.
I've had a lot of luck adding the Chosen JavaScript to an existing picking list. Strictly speaking, it's not an auto-complete in the classical Ajax sense, because all of the options are already in the page, you're not making background requests to search for options. GitHub - harvesthq/chosen: Deprecated - Chosen is a library for making long, unwieldy select boxes more friendly.
Walter
+1
Simple and sturdy gem to serve my purpose. Thanks Walter.
Hi Deepak,
Generally I prefer chosen.js for static select list. It works out of the box simply by adding 'chosen-select' class to select tag. If your list is massivly big ajax-chosen.js is best choice. You can filer select result by sending search query to server when user start typing on the text box.
Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes
GitHub - meltingice/ajax-chosen: A complement to the jQuery library Chosen that adds ajax autocomplete
Actually, in my app
<option> field = number of patient added
Means as much as patient added, list gain it's size according to that
so, it seems 'ajax-chosen' works great for me.
Right now I'm playing with 'chosen' only. I'm facing little obstacle
in it, although it works like a charm but in order to work it properly
I have to refresh my page only then it come into effect. Else, if I
click on button and move to 'vital/new.html.erb' page it show simple
text field, once I refresh my page then it comes into effect. Any idea
what's happing.
I have followed this : GitHub - tsechingho/chosen-rails: Integrate Chosen javascript library with Rails asset pipeline
There is also typeahead-rails gem. It is also based on js solution which I haven't tried but worth for you to look at.
GitHub - torbjon/typeahead-rails: Twitter Typeahead.js with Rails asset pipeline
Surely, I'll check this out once I grab a hold on chosen.
Hi Deepak,
Generally I prefer chosen.js for static select list. It works out of the box simply by adding 'chosen-select' class to select tag. If your list is massivly big ajax-chosen.js is best choice. You can filer select result by sending search query to server when user start typing on the text box.
Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes
GitHub - meltingice/ajax-chosen: A complement to the jQuery library Chosen that adds ajax autocomplete
Actually, in my app
<option> field = number of patient added
Means as much as patient added, list gain it's size according to that
so, it seems 'ajax-chosen' works great for me.
Right now I'm playing with 'chosen' only. I'm facing little obstacle
in it, although it works like a charm but in order to work it properly
I have to refresh my page only then it come into effect. Else, if I
click on button and move to 'vital/new.html.erb' page it show simple
text field, once I refresh my page then it comes into effect. Any idea
what's happing.
I have followed this : GitHub - tsechingho/chosen-rails: Integrate Chosen javascript library with Rails asset pipeline
There is also typeahead-rails gem. It is also based on js solution which I haven't tried but worth for you to look at.
GitHub - torbjon/typeahead-rails: Twitter Typeahead.js with Rails asset pipeline
Surely, I'll check this out once I grab a hold on chosen.
You're running into the usual conflict with Turbolinks. Instead of using $(document).ready(...) (jquery) or document.on('dom:loaded', ...) (prototype), you have to listen for a different event in order to start your script:
$(document).on('page:change', ...) replaces $(document).ready(...) in jQuery, and document.on('page:change', ...) does the same in Prototype.
This is all because with Turbolinks, the outermost page loads only once, and never again unless something really disruptive happens to cause a hard reload of the browser. So the usual dom load event only fires once, and any updates to the page don't register with your JavaScript code.
Walter
What would the best practice to overcome this problem. Do I use static
file 'chosen.min.css' and 'chosen.jquery.min.js' and put then in
assets/stylesheet and assets/javascript folder respectively or
something else.
Right now I put below code in application.js file
$(function() {
return $('.chosen-select').chosen({
allow_single_deselect: true,
no_results_text: 'No results matched',
width: '200px'
});
});
What modification do I need to do I above code so that I runs well.
Please pardon me, my hand is little tight in jQuery :).
