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'
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With