Bootstrap Select style and search not working

Question

I am trying to use Bootstrap-Select with the search functionality. I can not seem to get it to work, I installed it using npm install bootstrap-select which installs fine @1.12.4 My code for the div and select is:

<div class="form-group">
 <select class="selectpicker" id="sel" name="manufacturer" onchange="man()" data-live-search="true">
  <option selected>Manufacturer</option>
  <option value="cisco">Cisco</option>
  <option value="netgear">NetGear</option>                             
  <option value="other">Other</option>
 </select>
</div>

Why is it not working? What did I miss type?

I get this after I include it in my index file `ome/ubuntu/workspace/asset-management/node_modules/bootstrap-select/dist/js/bootstrap-select.js:157 _set: $.valHooks.select.set ^ TypeError: Cannot read property 'select' of undefined` — , Oct 13 '17 at 01:52
I should add when I include the CDN CSS and JS link/script it just makes the selects disappear. They don't show up in the browser at all. — , Oct 13 '17 at 02:00
@Naga2Raja What JS part? Do you have to do custom setup for this package? I figured it was install then require and it should work when used. The only js I have for this is `var jQuery = require("jquery"); var bootstrapSelect = require("bootstrap-select");` — , Oct 13 '17 at 02:03

score 3 · Accepted Answer · answered Oct 13 '17 at 02:14

this is what you need to do

$(function() {
  $('.selectpicker').selectpicker();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />




<div class="container">

  <div class="row">
    <div class="col-xs-12">
      <div class="box">
        <!-- /.box-header -->
        <div class="box-body">
          <form>
            <div class="form-group row">
              <label for="" class="col-sm-2 form-control-label">Country</label>
              <div class="col-sm-10">
                <select class="form-control selectpicker" id="select-country" data-live-search="true">
                <option data-tokens="china">China</option>
                <option data-tokens="malayasia">Malayasia</option>
                <option data-tokens="singapore">Singapore</option>
                </select>

              </div>
            </div>
          </form>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</div>
<!-- /.container -->

I tried this and while the code snippet works I can only get the style to sorta work and the drop-down fails fully even when I use to select you have directly. — , Oct 13 '17 at 02:20
I added those includes to the header file so load order should not be the issue. — , Oct 13 '17 at 02:21
@JoshKirby order doesn't matter, but as a try, i request you to put it in the same order as the above.. Basically calling the js before using it. — Nagaraja Thangavelu, Oct 13 '17 at 02:22
I did I added all JS to the header file. Copy and paste of yours fails. The function you posted comes at the top of my footer with the other includes in the header. — , Oct 13 '17 at 02:24
Okay I played around with order and got them to sorta work. The only issue now is they are greyed out like they should be disabled but they are not disabled — , Oct 13 '17 at 02:27

score -1 · Answer 2 · answered Oct 13 '17 at 02:10

-1

The reason is because you haven't added the dependency java script file for using bootstrap-select. Mostly Bootstrap’s dropdown.js component.

You can try including the following script and execute.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

answered Oct 13 '17 at 02:10

Nagaraja Thangavelu

1,168
1
15
31

I have bootstrap included already, I am using the JS part in other areas of my project. – Oct 13 '17 at 02:13
I hope you had not missed out jquery.min.js – Nagaraja Thangavelu Oct 13 '17 at 02:15

Bootstrap Select style and search not working

2 Answers2

Linked