jQuery Dropdown Select Plugin

September 03, 2019 No comments jQuery Plugin Select Bootstrap

1. Introduction

BootstrapSelect is a jQuery dropdown plugin specially designed for websites based on the Bootstrap framework. The plugin comes with many great options like live search, optgrouping support, responsive design and clear selection.

Bootstrap select plugin

2. Plugin Overview

Library BootstrapSelect
Author Xarksass
Licence MIT Licence
Repository GitHub
Dependencies jQuery 1.3.1 or Latest version and Bootstrap 4.1.3

Demo

3. How to install and use BootstrapSelect jQuery plugin

Follow the below steps to install BootstrapSelect jQuery plugin on your website.

1. Include the jQuery and Bootstrap 3.x with Font Awesome icons into your HTML document:

<!--Font Awesome-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<!--jQuery-->
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

2. Load livefilter, tabcomplete and FilterList libraries and bootstrap-select JS file:

<script src="js/vendor/modernizr-2.8.3.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/filterlist.min.js"></script>
<script src="js/plugins.js"></script>

3. For basic usage create the following Bootstrap structure:

<div id="name-to-send" class="selectpicker">
    <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">
        <ul class="list-unstyled">
            <li class="items" data-value="1">Item 1</li>
            <li class="items" data-value="2">Item 2</li>
            <li class="items" data-value="3">Item 3</li>
        </ul>
    </div>
    <input type="hidden" name="name-to-send" value="">
</div>

More advanced sample that uses live searching will look like the following:

<div id="name-to-send" class="selectpicker" data-live="true">
    <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">
            <label class="sr-only" for="input-bts-ex-4">Search in the list</label>
            <div class="search-box">
                <input type="text" class="form-control hint" tabindex="-1" />
                <input type="text" placeholder="Search in the list" id="input-bts-ex-4" class="form-control live-search" tabindex="1" />
            </div>
            <a href="#" class="fa fa-times hide filter-clear"><span class="sr-only">Clear filter</span></a>
            <div class="list-to-filter">
                <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>
                <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="name-to-send" value="">
</div>

4. Initialize the BootstrapSelect pluin in jQuery document ready section:

$(document).ready(function(){
    $('.selectpicker').bootstrapSelect();
});

4. Conclusion

In this article, we presented BootstrapSelect jQuery plugin that can be used to create dropdown select components on your website. The plugin has many customization options and comes with useful features like live searching. BootstrapSelect is fully responsive and can be adopted to any website that uses Bootstrap in version 3.x.

{{ message }}

{{ 'Comments are closed.' | trans }}