jQuery Plugin For Filterable Bootstrap Dropdown Select - Bootstrap Select

jQuery Plugin For Filterable Bootstrap Dropdown Select - Bootstrap Select
File Size: 770 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Bootstrap Select is a jQuery plugin to enhance the default Bootstrap dropdown select with multiple options like: optgoup support, auto-completion, clear selection and live filtering.

Dependencies:

  • jQuery.
  • Bootstrap 3 framework.
  • Font Awesome 4 icons.
  • jQuery LiveFilter plugin for live filtering.
  • tabcomplete.js for autocompletion.

How to use it:

1. Include the jQuery Bootstrap Select plugin and other required resources into your Bootstrap page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/vendor/tabcomplete.min.js"></script>
<script src="js/vendor/livefilter.min.js"></script>
<script src="js/vendor/src/bootstrap-select.js"></script>
<script src="js/vendor/src/filterlist.js"></script>

2. Create an advanced dropdown select with input to filter the list, clear button and list option groups.

<div id="example" class="selectpicker" data-clear="true" data-live="true">
  <a href="#" class="clear"><span class="fa fa-times"></span><span class="sr-only">Cancel the selection</span></a>
  <button data-id="prov" type="button" class="btn btn-lg btn-block btn-default dropdown-toggle">
      <span class="placeholder">Choose an option</span>
      <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
      <div class="live-filtering" data-clear="true" data-autocomplete="true" data-keys="true">
          <label class="sr-only" for="input-bts-ex-5">Search in the list</label>
          <div class="search-box">
              <div class="input-group">
                  <span class="input-group-addon" id="search-icon5">
                      <span class="fa fa-search"></span>
                      <a href="#" class="fa fa-times hide filter-clear"><span class="sr-only">Clear filter</span></a>
                  </span>
                  <input type="text" placeholder="Search in the list" id="input-bts-ex-5" class="form-control live-search" aria-describedby="search-icon5" tabindex="1" />
              </div>
          </div>
          <div class="list-to-filter">
              <ul class="list-unstyled">
                  <li class="optgroup">
                      <span class="optgroup-header">List Group <span class="subtext"></span></span>
                      <ul class="list-unstyled">
                          <li class="filter-item items" data-filter="item 1" data-value="1">item 1</li>
                          <li class="filter-item items" data-filter="item 2" data-value="2">item 2</li>
                          <li class="filter-item items" data-filter="item 3" data-value="3">item 3</li>
                          <li class="filter-item items" data-filter="item 4" data-value="4">item 4</li>
                          <li class="filter-item items" data-filter="item 5" data-value="5">item 5</li>
                      </ul>
                  </li>
              </ul>
              <div class="no-search-results">
                  <div class="alert alert-warning" role="alert"><i class="fa fa-warning margin-right-sm"></i>No entry for <strong>'<span></span>'</strong> was found.</div>
              </div>
          </div>
      </div>
  </div>
  <input type="hidden" name="example" value="">
</div>

3. All default plugin settings.

select      : this,
autoclose   : true,
cancelbtn   : false,
clearbtn    : false,
livefilter  : false,
filter      : null,
fmethod     : 'recursive',
open        : 'open',
filled      : 'filled',
display     : '.dropdown-toggle',
list        : '.dropdown-menu',
placeholder : '.placeholder',
items       : '.items',
current     : '.current',
clear       : '.clear',
selected    : '.selected',
cancel      : '.cancel'

Change log:

2017-09-13

  • v2.2.4

2017-02-21

2015-11-28

  • Plugin initialisation optimised

2015-11-24

  • more configurations.

This awesome jQuery plugin is developed by Xarksass. For more Advanced Usages, please check the demo page or visit the official website.