Rails - Combination of Dropdown and Free-Text-Input

Question

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.

Answer 1

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.