How do I make search from dataset using select2 gem quicker in my rails form?

Question

There are over 9000 values in my dataset that users can choose from through a select tag. I am using select2 gem so they can search through the dataset but the time to load after and before i input something in the form is a lot. How do I reduce this? I alrady have minimuminputlength as 2 and that is not working for some reason.

<script>
$(document).ready(function() {
    minimumInputLength: 2
    $('.js-example-basic-single').select2();
});


</script>
<%= form_for @profile, url: user_profile_path, :html => { :multipart => true } do |f| %>
<%= f.text_field :first_name, placeholder: "First Name", class: 'input-1' %>
<%= f.text_field :last_name, placeholder: "Last Name", class: 'input-1' %>

<%= f.select :city, ['les Escaldes,Andorra,Escaldes-Engordany,3040051', 'Andorra la Vella,Andorra,Andorra la Vella,3041563', 'Umm al Qaywayn,United Arab Emirates,Umm al Qaywayn,290594'...], { :include_blank => 'City' }, :required => true, class: 'js-example-basic-single' %>

    <% if current_user.profile %>
        <%= f.submit 'Update', class: 'btn btn-default', class: 'bu' %>
    <% else %>
        <%= f.submit 'Create', class: 'btn btn-default', class: 'bu' %>
    <% end %>
<% end %>

Also how I do edit the font and font size of the contents of the sleect 2 select values. Editing the class, 'js-example-basic-single' does not work.

Edit: The suggestion below does not work either for me. Am I doing something wrong?

<script>
$(document).ready(function() {


    $('.js-example-basic-single').select2();
});


$('select').select2({
  minimumInputLength: 3
});


</script>
<%= form_for @profile, url: user_profile_path, :html => { :multipart => true } do |f| %>
<%= f.text_field :first_name, placeholder: "First Name", class: 'input-1' %>
<%= f.text_field :last_name, placeholder: "Last Name", class: 'input-1' %>
<%= f.file_field :avatar, class: 'input-1'%>
<%= f.select :age, [13, 14, 15,16,17...], { :include_blank => 'Age' }, :required => true, class: 'input-1' %>
<%= f.select :gender, ['Male','Female', 'Other'], { :include_blank => 'Gender' }, :required => true, class: 'input-1' %>
<%= f.select :city, ['les Escaldes,Andorra,Escaldes-Engordany,3040051', 'Andorra la Vella,Andorra,Andorra la Vella,3041563', 'Umm al Qaywayn,United Arab Emirates,Umm al Qaywayn,290594'...],{ :include_blank => 'City' }, :required => true, class: 'js-example-basic-single' %>
<%= f.text_field :collegeemail, placeholder: "College Email (Leave Empty If You Do Not Have One)", class: 'input-1' %>
    <% if current_user.profile %>
        <%= f.submit 'Update', class: 'btn btn-default', class: 'bu' %>
    <% else %>
        <%= f.submit 'Create', class: 'btn btn-default', class: 'bu' %>
    <% end %>
<% end %>

Answer 1

Seems to me you're putting all of the existing 9000+ cities from your db into the page. That's why it takes so long to open a select (it takes some time for user to download such page + it probably takes long to just open/render such select after the page is loaded).

You have to pass just a few options (cities in your case) on the page initially and fetch the rest using AJAX, see this instruction in the select2 docs.

You will need to implement an API endpoint in your Rails app to be able to fetch cities via AJAX request.