I am using Rails 4.2.1 and ruby 2.1.6
I am looking for a solution to do the following:
Have a dropdown containing a list of existing regions (Bundesland).
If I find my region in that list, select from the dropdown and I am fine.
If I do not find my region, I need to manually type in a new region into a text field. This will create a new entry in the database as well.
To have this userfriendly and easy to use without switching between fields, I prefer to have this in one field if possible.
Here is the code for my actual dropdown, but without any option for
free-text and manual input.
<br>
= ai3.input :area_id, label: "Bundesland/Kanton", :as => :select, :collection => option_groups_from_collection_for_select( #area_countries_dach, :area_regions, :name, :id, :name)
Now this needs to be expanded to a combination of a select-box (dropdown) and a free-text input field.
It would be great to have the user typing into the field the beginning chars for the region. if found, select by click or leaving the field. If not found use the already typed chars for the creation of the new region.
Any ideas on how to solution this?
Thanks.
You can manually have a text_field appear upon clicking a link/button/div if the region is not found in the drop-down.
Something like below
<div id="show_region" class="btn btn-primary">Cant Find Your Region? Manually Add It Here</div>
<%= ai3.input :some_attribute, :class => 'form-control', :id => 'input_region', placeholder: 'Enter your region' %>
Javacsript
<script type="text/javascript">
$('#input_region').hide();
$(document).ready(function() {
$('#show_region').click(function() {
$('#input_region').slideToggle("slow");
});
});
</script>
But you can't save it in the same attribute AFAIK. You need to have a different attribute for the text_field.
It would be great to have the user typing into the field the beginning
chars for the region. if found, select by click or leaving the field
This needs an autocomplete text_field rather than a normal text_field. Take a look here on how to implement it.
As Pavan mentioned, an autocomplete text field works well in this situation. I ran across the same thing recently and used twitter typeahead for it.
https://github.com/yourabi/twitter-typeahead-rails
There's lots of discussion on it elsewhere.
Related
Still pretty new to ruby.. How would I add a feature to this drop down to allow users to enter an attribute that is not in the drop down list. Right now when I try to add something it says no results matched.
<%= f.select(:attribute_type, #attribute_types, {include_blank: true}, class: 'form-control selectpicker', data: {'live-search' => 'true'}) %>
The no results matched message is because you are not adding something to the select, but you are searching in the select list.
If you want users to have the option to fill in whatever they want instead of selecting it drop the select you can just add an input field below the select.
I have the following field in my form:
<%= f.association :account_manager, collection: Person.appear_on_register_page, :value_method => :id, :label_method => :full_name, :required => true, prompt: "Please Select", label: label %>
This gives the user a textbox, which when clicked on gives a dropdown with every record in the collection. When typing in the text box, this dropdown is narrowed to only match what is in the text box.
I've been asked to remove the dropdown until a user has started entering text - for example when first clicking on the text box no drop down appears until the first 3 letters have been entered - then all records matching those three letters appear.
I've looked through their github and can't find any options for this.. Any help is appreciated
Hope you are looking for a auto complete text box. You can achieve this using Jquery UI.
This is a good gem you can go with.
This is one of the good tutorial for that. Thanks
I thought this would be fairly easy, but I'm not finding any help by Googling.
I have a form (simple_form) with numerous inputs with select lists (collections) that are populated from the database, so many it is slowing down the initial page load. I thought I could speed it up by only populating those drop down lists as the user selects them using Ajax. Is there something built in like remote => true for the form itself? Can someone point me in the right direction?
EDIT:
I found this SO question but I cannot figure out how to implement the answer.
Currently, my form looks like this;
= simple_form_for(#account)
= f.input :account_number
= f.input :area, collection: #areas
= f.submit nil, :class => 'btn btn-primary'
Based on the answer in the linked question, I should add something like this, but of course it is not working
= simple_form_for(#account)
= f.input :account_number
= f.input :area, collection: #areas, :input_html => {"data-remote" => true, "data-url" => "/my_areas", "data-type" => :json}
= f.submit nil, :class => 'btn btn-primary'
I can think of two ways to go about this if you don't want to load the contents initially when the page loads. One way is to run a script after the DOM has loaded to change the options for the select tag and the other is to collect the options when you click on the drop-down on the select element. I might go for the first way because there wouldn't be latency when a user clicks on the select element--they wouldn't have to wait for the options to populate.
So you'd run a jQuery script on document ready that makes an AJAX call to a method in your controller, which then returns the collections you want, then you iterate through the select elements you want to change with JQuery scripts. It might look something like this.
# in view with the select options to be changed
$(document).ready(function() {
$.get(change_selects_path, function(response) {
$.each(response, function(args) {
// code for each select element to be changed
$('.class_of_select_element').html(<%= j options_from_collection_for_select(args) %>);
});
});
)};
# in controller
def change_selects
# make db calls and store in variables to feed to $.get request
end
Note that this not tested but should give you a good start towards a solution. For further info on the each loop, you can check out this documentation.
Not sure if this fits your exact use case (please clarify if not), but I also have a few collection selects that have a large amount of database rows behind them. I use the select2-rails gem to take care of this. Users can begin to type in the name and the relevant results will show up (it will also show a few initially if they don't type something).
Check it out here: https://github.com/argerim/select2-rails
Edit: For a cascading dropdown, I recommend this gem: https://github.com/ryanb/nested_form
I am using the typeahead js extension from twitter bootstrap for an autocomplete field. I have a subtle problem with that. I have a text field like :
<%= text_field_tag :search, params[:search], :data => { :provide => 'typeahead', :source => ...} %>
The problem is that i have to specify name='search' (with :search), in order to be able to grab the text input search value. However, if i do so, the browser automatically creates an autocomplete history of the entries i have already tried in my text field.
If i remove :search and replace with '', the browser cannot 'save' the history, because there is no name attribute on the text field. However, this way, i cannot get the inputted value myself.
How can i work around this ?
When I use autocomplete from jquery-ui, it sets the attribute autocomplete="off" in the input tag, so you might try including the option :autocomplete=>"off". The field doesn't show any inputs from the history, just what was passed in to autocomplete.
If that doesn't work, just try jquery-ui's autocomplete instead. It definitely works.
I'm developing project on rails 2.3.8 and I need to observe field on drop down menu which develop using collection select. Please can some one explain how to observe field ?
My collection select code is like this
<%= collection_select("event", "trainer_id", #trainers , :id, :name, {:prompt => true}) %>
And I don't know how to use observe field for this. So please can some one explain about this ?
Related: Auto populate a text field based on another text field
observe_field(field_id, options = {})
Observes the field with the DOM ID specified by field_id and calls a callback when its contents have changed. The default callback is an Ajax call. By default the value of the observed field is sent as a parameter with the Ajax call.
Read this details: http://apidock.com/rails/ActionView/Helpers/PrototypeHelper/observe_field