I am a Rails beginner and trying to use Select2
gem in Rails application and I see it not working as expected.It is shown as normal drop down only where i am expecting search option included in it. Can some one help me please.
HTML Code
<tbody id="template"> <tr> <td> <%= select_tag "order[order_placed][][itemname]", options_from_collection_for_select(Stock.all, "item_name", "item_name"), {:class => 'form-control', :id => 'select_two', :style => "width: 180px"} %> </td> <td><input name="order[order_placed][][quantity]" type="text" size='10' class="form-control" /></td> <td><input name="order[order_placed][][unitprice]" type="text" size='10' class="form-control" /></td> <td><input name="order[order_placed][][tax]" type="text" size='10' class="form-control"/></td> <td><input name="order[order_placed][][discount]" type="text" size='10' class="form-control"/></td> <td><input name="order[order_placed][][itemtotalprice]" type="text" size='10' class="form-control" /></td> <td> <button type="button" class="btn btn-default btn-sm sub" onClick="$(this).closest('tr').remove();"> <span class="glyphicon glyphicon-minus"></span> </button> </td> </tr> </tbody>
Here is my application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's // vendor/assets/javascripts directory can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. JavaScript code in this file should be added after the last require_* statement. // // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details // about supported directives. // //= require rails-ujs //= require jquery //= require toastr //= require bootstrap-sprockets //= require turbolinks //= require_tree . $(document).ready(function)(){ $('#select_two').select2(); }
Gem file has the related gem
gem 'select2-rails'
Advertisement
Answer
I don’t know what this is the solution but I have worked this manually on my application after following those steps
On Gemfile
gem "select2-rails" # bundle install
application.js
//= require select2
Just above this //= require_tree .
line
application.js
(function($){ "use strict"; $(document).on('ready', function(){ $("#order_place_id").select2({ allowClear: true, theme: "bootstrap" }); }); }(jQuery));
application.css
*= require select2 *= require select2-bootstrap
HTML Code
<div class="form-group"> <label>Place Order</label> <select name="order[order_placed][][itemname]" id="order_place_id" class="form-control"> <% Stock.all.each do |stock| %> <option value="<%= stock.item_name %>"> <%= stock.item_name %> </option> <% end %> </select> </div>
and finally, see the below image which I implemented
If you try this solution make sure restart your server after finished steps.
Hope to help