0

I'm trying to use Bootstrap Multiselect in my rails app in combination with a search bar.

Demo bootstrap code for Multiselect (what I'm trying to recreate):

<select class="select" multiple data-mdb-placeholder="Example placeholder" multiple>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

My view file includes the code below, which renders a box that shows the options but the only way to select multiple ones is by doing ctrl+shift - which is definitely something I don't want.

<div class="row">
    <div class="col-md-12">
        <%= form_with(model: @post, url: posts_path, method: :get) do |form| %>
            <%= search_field_tag :search, params[:search], placeholder: "Look for Post", class: "form-control" %>   
            <%= select_tag 'Post Categories', options_for_select(@categories.map{|c| c}), :multiple => true, class: "form-control" %>    
            <%= form.submit "Search"%>
        <% end %>
    </div>
</div>

Some of the things I have tried so far: The class of the select_tag line is "form-control" now, but I tried using

class="select"
class="select" multiple data-mdb-filter="true">

I want to use the bootstrap multiselect but also the form_with so that I can pass parameters from the dropdown menu and the search bar to my controller. It would be awesome to have everything in the same line, but I couldn't find out how to do that either.

Any thoughts would be appreciated!

ruby 2.7.2p137 bootstrap 4

Nicole Zamora
  • 1
  • 1

1 Answers1

0

Your code is correct but since you are using bootstrap 4 you need to include bootstrap-select plugin and maybe call some javascript (you can check the answer here Bootstrap 4 multiselect dropdown and more details here https://developer.snapappointments.com/bootstrap-select/)

may I also point that you have options_for_select(@categories.map{|c| c}) in your code which is the same as options_for_select(@categories) the mapping here is not needed as it returns itself and it may make your view render a bit slower if categories ever get too big

Mshka
  • 1,798
  • 1
  • 10
  • 19
  • Also note that the library you shared: https://mdbootstrap.com/docs/standard/extended/multiselect/ is not part of bootstrap as well – Mshka Apr 10 '21 at 10:29
  • I installed bootstrap-select before sharing this post - still didn't work. The links you shared have code that's divided into html with bootstrap and a javascript line of code (which I don't know where to include - should it be in my html.erb file at the beginning?). I am new to Ruby on Rails and html, and I'm not sure how to combine js with an html.erb file. It looks like most of the solutions only include the dropdown menu, which makes it easier because you only include class="selectpicker", but my issue is combining form_with and select-picker. You are right about the @categories! – Nicole Zamora Apr 10 '21 at 13:40
  • Your code is correct and your combination of `from_wit`h and `select-picker` is correct - now you need to activate the code via JS as a quick trial please open the dev tool in your browser and inside a console try the js command `$('select').selectpicker();` and see if your select form works - let me know if it works – Mshka Apr 10 '21 at 13:48
  • I opened the JavaScript console, and after running the command it said that `TypeError: ('select').selectpicker is not a function. (In '('select').selectpicker()', '('select').selectpicker' is undefined)` – Nicole Zamora Apr 13 '21 at 03:39