bootstrap-select-dropdown
Version:
A jQuery plugin for Bootstrap 4 that converts <select> and <select multiselect> elements to dropdowns. Uses fuse.js for fuzzy search and Bootstrap's dropdown plugin.
577 lines (465 loc) • 18.7 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bundle.css">
<title>Bootstrap Select Dropdown</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container justify-content-between">
<a class="navbar-brand" href="#">Bootstrap Select Dropdown</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<span class="navbar-text ml-auto">
</span>
<ul class="navbar-nav">
<li class="nav-item">
<a id="version" class="nav-link" href="/"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.npmjs.com/package/bootstrap-select-dropdown">
npm
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/thompsonsj/bootstrap-select-dropdown">
<svg class="ion ion-social-github">
<use xlink:href="#ion-social-github"></use>
</svg>
</a>
</li>
</ul>
<form class="form-inline ml-2">
<a href="https://github.com/thompsonsj/bootstrap-select-dropdown/archive/master.zip" class="btn btn-outline-light my-2 my-sm-0">Download</a>
</form>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-3">
<ul class="nav nav-pills flex-column nav-secondary">
<li class="nav-item">
<a class="nav-link " href="./">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link " href="getting-started.html">Getting started</a>
</li>
<li class="nav-item">
<a class="nav-link " href="examples.html">Examples</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="options.html">Options</a>
</li>
<li class="nav-item">
<a class="nav-link " href="features.html">Features</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="page-header">
<h1>Bootstrap Select Dropdown <small>for Bootstrap 4</small></h1>
</div>
<p class="lead">A jQuery plugin for Bootstrap 4 that converts <code><select></code> and <code><select multiselect></code> elements to dropdowns. Uses fuse.js for fuzzy search and Bootstrap's dropdown plugin.</p>
<div class="page-header">
<h2 id="options">Options</h2>
</div>
<h3>Defaults</h3>
<p>Plugin defaults:</p>
<pre><code>$(document).ready(function(){
$("#multiselect").selectDropdown({
// Behaviour
hideSelect: true,
search: true,
maxHeight: "300px",
keyboard: true,
badges: true,
badgesDismissable: true,
maxListLength: 0,
// Text
textNoneSelected: "Select",
textMultipleSelected: "%count_selected% selected",
textNoResults: "No results",
// Controls
deselectAll: true,
selectAll: true,
showSelected: true,
// Buttons
selectButtons: false,
classBtnDeselectAll : "btn btn-outline-secondary",
classBtnSelectAll : "btn btn-outline-secondary",
// HTML
htmlClear: "Clear search",
htmlDeselectAll: "Deselect all",
htmlSelectAll: "Select all",
htmlBadgeRemove: "[X]",
// Classes
classBtnSelect : "btn btn-primary",
classBadge: "badge badge-dark mr-1",
classBadgeLink: "text-white",
classBadgeContainer : "mt-2 mb-3"
})
});</code></pre>
<div class="page-header">
<h3>Behaviour</h3>
</div>
<h4>hideSelect</h4>
<dl class="row">
<dt class="col-sm-2">Default</dt>
<dd class="col-sm-10"><code>true</code></dd>
</dl>
<p>Hide the <select> element. This is expected. However, you may wish to unhide the <select> element for testing.</p>
<h4>search</h4>
<dl class="row">
<dt class="col-sm-2">Default</dt>
<dd class="col-sm-10"><code>true</code></dd>
</dl>
<p>
Convert the dropdown button to an <code>input-group</code> with a search form control.
</p>
<h4>maxHeight</h4>
<dl class="row">
<dt class="col-sm-2">Default</dt>
<dd class="col-sm-10"><code>"300px"</code></dd>
</dl>
<p>
Set a max height on the dropdown, making it scrollable. This can be disabled by setting to <code>false</code>.
</p>
<h4>keyboard</h4>
<dl class="row">
<dt class="col-sm-2">Default</dt>
<dd class="col-sm-10"><code>true</code></dd>
</dl>
<p>
Enable keyboard navigation. While the search control is focused, cursor keys/the enter key can be used to select options.
</p>
<h4>badges</h4>
<dl class="row">
<dt class="col-sm-2">Default</dt>
<dd class="col-sm-10"><code>true</code></dd>
<dt class="col-sm-2">Conditions</dt>
<dd class="col-sm-10">
Multiselect elements only.
</dd>
</dl>
<p>
Display badges below the element that represent selected options.
</p>
<h4>badgesDismissable</h4>
<dl class="row">
<dt class="col-sm-2">Default</dt>
<dd class="col-sm-10"><code>true</code></dd>
<dt class="col-sm-2">Conditions</dt>
<dd class="col-sm-10">
<code>badges</code> is <code>true</code>.<br />
Multiselect elements only.
</dd>
</dl>
<p>
Badges can be dismissed to deselect options.
</p>
<h4>maxListLength</h4>
<dl class="row">
<dt class="col-sm-2">Default</dt>
<dd class="col-sm-10"><code>0</code></dd>
</dl>
<p>
Set button text to a list of comma separated selected values. If the number of selected options exceeds this limit, the value of <code>textMultipleSelected</code> will be displayed.
</p>
<p>
The default of <code>0</code> disables this feature.
</p>
<div class="page-header">
<h3>Text</h3>
</div>
<h4>textNoneSelected</h4>
<dl class="row">
<dt class="col-sm-2">Default</dt>
<dd class="col-sm-10"><code>"None selected"</code></dd>
<dt class="col-sm-2">Conditions</dt>
<dd class="col-sm-10">
Multiselect elements only.
</dd>
</dl>
<p>
Dropdown button text when no items are selected.
</p>
<h4>textMultipleSelected</h4>
<dl class="row">
<dt class="col-sm-2">Default</dt>
<dd class="col-sm-10"><code>"%count_selected% selected"</code></dd>
<dt class="col-sm-2">Conditions</dt>
<dd class="col-sm-10">
Multiselect elements only.
</dd>
</dl>
<p>
Dropdown button text when multiple items are selected and <code>maxListLength</code> is exceeded.
</p>
<p>
The <code>%count_selected%</code> keyword is available to display the number of selected items.
</p>
<h4>textNoResults</h4>
<dl class="row">
<dt class="col-sm-2">Default</dt>
<dd class="col-sm-10"><code>"No results"</code></dd>
<dt class="col-sm-2">Conditions</dt>
<dd class="col-sm-10">
<code>search</code> is <code>true</code>.
</dd>
</dl>
<p>
This text appears when a search yields no results.
</p>
<div class="page-header">
<h3>Controls</h3>
</div>
<h4>deselectAll</h4>
<dl class="row">
<dt class="col-sm-2">Default</dt>
<dd class="col-sm-10"><code>true</code></dd>
<dt class="col-sm-2">Conditions</dt>
<dd class="col-sm-10">
Multiselect elements only.
</dd>
</dl>
<p>
Include a deselect all option in the dropdown menu.
</p>
<p>
Alternatively, if <code>selectButtons</code> is <code>true</code>, a deselect all button will be included in the input group.
</p>
<h4>selectAll</h4>
<dl class="row">
<dt class="col-sm-2">Default</dt>
<dd class="col-sm-10"><code>true</code></dd>
<dt class="col-sm-2">Conditions</dt>
<dd class="col-sm-10">
Multiselect elements only.
</dd>
</dl>
<p>
Include a select all option in the dropdown menu.
</p>
<p>
Alternatively, if <code>selectButtons</code> is <code>true</code>, a select all button will be included in the input group.
</p>
<div class="page-header">
<h3>Buttons</h3>
</div>
<h4>selectButtons</h4>
<dl class="row">
<dt class="col-sm-2">Default</dt>
<dd class="col-sm-10"><code>false</code></dd>
<dt class="col-sm-2">Conditions</dt>
<dd class="col-sm-10">
Multiselect elements only.
</dd>
</dl>
<p>
Include 'deselect all' and 'select all' controls as buttons within the input group rather than as dropdown menu items.
</p>
<h4>classBtnDeselectAll</h4>
<dl class="row">
<dt class="col-sm-2">Default</dt>
<dd class="col-sm-10"><code>"btn btn-outline-secondary"</code></dd>
<dt class="col-sm-2">Conditions</dt>
<dd class="col-sm-10">
Multiselect elements only.<br />
<code>selectButtons</code> is <code>true</code>.
</dd>
</dl>
<p>
The class applied to the deselect all button.
</p>
<h4>classBtnSelectAll</h4>
<dl class="row">
<dt class="col-sm-2">Default</dt>
<dd class="col-sm-10"><code>"btn btn-outline-secondary"</code></dd>
<dt class="col-sm-2">Conditions</dt>
<dd class="col-sm-10">
Multiselect elements only.<br />
<code>selectButtons</code> is <code>true</code>.
</dd>
</dl>
<p>
The class applied to the select all button.
</p>
<div class="page-header">
<h3>HTML</h3>
</div>
<p class="highlight">
Include your own text/HTML values for:
</p>
<ul>
<li>
The deselect all button.
</li>
<li>
The select all button.
</li>
<li>
The dismiss/deselect link within badges.
</li>
</ul>
<p>
The example below use SVG sprite icons from <a href="https://rastasheep.github.io/ionicons-sprite/">Ionicons sprite</a> by <a href="https://rastasheep.github.io/">rastasheep</a> who created sprites from <a href="http://ionicons.com/">ionicons</a>, the premium icon font for <a href="http://ionicframework.com/">Ionic Framework</a>.
</p>
<div class="form-group">
<label for="demo_options_html">Select one or more of your favourite foods</label>
<select id="demo_options_html" class="form-control" multiple>
<option value="apples">Apples</option>
<option value="bananas">Bananas</option>
<option value="beef">Beef</option>
<option value="chicken">Chicken</option>
<option value="condensed-milk">Condensed milk</option>
<option value="dark-chocolate">Dark chocolate</option>
<option value="dried-bananas">Dried bananas</option>
<option value="eggs">Eggs</option>
<option value="ice-cream">Ice cream</option>
<option value="milk">Milk</option>
<option value="milk-chocolate">Milk chocolate</option>
<option value="msg">Monosodium Glutamate</option>
<option value="starfruit">Starfruit</option>
<option value="strawberries">Strawberries</option>
</select>
</div>
<pre><code><div class="form-group">
<label for="demo_options_html">Select one or more of your favourite foods</label>
<select id="demo_overview_example" class="form-control" multiple>
<!-- options -->
</select>
</div>
<script>
$(document).ready(function(){
$("select#demo_options_html").selectDropdown({
'selectButtons': true,
'htmlDeselectAll': '<svg class="ion"><use xlink:href="#ion-close-circled"></use></svg>',
'htmlSelectAll': '<svg class="ion"><use xlink:href="#ion-checkmark-circled"></use></svg>',
'htmlBadgeRemove': '<svg class="ion"><use xlink:href="#ion-close"></use></svg>'
});
});
</script></code></pre>
<h4>htmlClear</h4>
<dl class="row">
<dt class="col-sm-2">Default</dt>
<dd class="col-sm-10"><code>"Clear search"</code></dd>
<dt class="col-sm-2">Conditions</dt>
<dd class="col-sm-10">
<code>search</code> is <code>true</code>.<br />
Multiselect elements only.
</dd>
</dl>
<h4>htmlDeselectAll</h4>
<dl class="row">
<dt class="col-sm-2">Default</dt>
<dd class="col-sm-10"><code>"Deselect all"</code></dd>
<dt class="col-sm-2">Conditions</dt>
<dd class="col-sm-10">
<code>search</code> is <code>true</code>.<br />
<code>deselectAll</code> is <code>true</code>.<br />
Multiselect elements only.
</dd>
</dl>
<h4>htmlSelectAll</h4>
<dl class="row">
<dt class="col-sm-2">Default</dt>
<dd class="col-sm-10"><code>"Select all"</code></dd>
<dt class="col-sm-2">Conditions</dt>
<dd class="col-sm-10">
<code>search</code> is <code>true</code>.<br />
<code>selectAll</code> is <code>true</code>.<br />
</dd>
</dl>
<h4>htmlBadgeRemove</h4>
<dl class="row">
<dt class="col-sm-2">Default</dt>
<dd class="col-sm-10"><code>"[x]"</code></dd>
<dt class="col-sm-2">Conditions</dt>
<dd class="col-sm-10">
<code>badges</code> is <code>true</code>.<br />
Multiselect elements only.
</dd>
</dl>
<div class="page-header">
<h3>Classes</h3>
</div>
<h4>classBtnSelect</h4>
<dl class="row">
<dt class="col-sm-2">Default</dt>
<dd class="col-sm-10"><code>"btn btn-primary"</code></dd>
</dl>
<p>
The class applied to the dropdown button.
</p>
<h4>classBadge</h4>
<dl class="row">
<dt class="col-sm-2">Default</dt>
<dd class="col-sm-10"><code>"badge badge-dark mr-1"</code></dd>
<dt class="col-sm-2">Conditions</dt>
<dd class="col-sm-10">
<code>badges</code> is <code>true</code>.<br />
Multiselect elements only.
</dd>
</dl>
<p>
The class applied to badges.
</p>
<h4>classBadgeContainer</h4>
<dl class="row">
<dt class="col-sm-2">Default</dt>
<dd class="col-sm-10"><code>"mt-2 mb-3"</code></dd>
<dt class="col-sm-2">Conditions</dt>
<dd class="col-sm-10">
<code>badges</code> is <code>true</code>.<br />
Multiselect elements only.
</dd>
</dl>
<p>
The class applied to the badge container.
</p>
</div><!-- /.col-md-9 -->
</div><!-- /.row -->
</div><!-- /.container -->
<svg width="0" height="0" style="position:absolute">
<defs>
<symbol viewBox="0 0 512 512" id="ion-close">
<path d="M443.6 387.1L312.4 255.4l131.5-130c5.4-5.4 5.4-14.2 0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4-3.7 0-7.2 1.5-9.8 4L256 197.8 124.9 68.3c-2.6-2.6-6.1-4-9.8-4-3.7 0-7.2 1.5-9.8 4L68 105.9c-5.4 5.4-5.4 14.2 0 19.6l131.5 130L68.4 387.1c-2.6 2.6-4.1 6.1-4.1 9.8 0 3.7 1.4 7.2 4.1 9.8l37.4 37.6c2.7 2.7 6.2 4.1 9.8 4.1 3.5 0 7.1-1.3 9.8-4.1L256 313.1l130.7 131.1c2.7 2.7 6.2 4.1 9.8 4.1 3.5 0 7.1-1.3 9.8-4.1l37.4-37.6c2.6-2.6 4.1-6.1 4.1-9.8-.1-3.6-1.6-7.1-4.2-9.7z"></path>
</symbol>
<symbol viewBox="0 0 512 512" id="ion-close-circled">
<path d="M256 33C132.3 33 32 133.3 32 257s100.3 224 224 224 224-100.3 224-224S379.7 33 256 33zm108.3 299.5c1.5 1.5 2.3 3.5 2.3 5.6 0 2.1-.8 4.2-2.3 5.6l-21.6 21.7c-1.6 1.6-3.6 2.3-5.6 2.3-2 0-4.1-.8-5.6-2.3L256 289.8l-75.4 75.7c-1.5 1.6-3.6 2.3-5.6 2.3-2 0-4.1-.8-5.6-2.3l-21.6-21.7c-1.5-1.5-2.3-3.5-2.3-5.6 0-2.1.8-4.2 2.3-5.6l75.7-76-75.9-75c-3.1-3.1-3.1-8.2 0-11.3l21.6-21.7c1.5-1.5 3.5-2.3 5.6-2.3 2.1 0 4.1.8 5.6 2.3l75.7 74.7 75.7-74.7c1.5-1.5 3.5-2.3 5.6-2.3 2.1 0 4.1.8 5.6 2.3l21.6 21.7c3.1 3.1 3.1 8.2 0 11.3l-75.9 75 75.6 75.9z"></path>
</symbol>
<symbol viewBox="0 0 512 512" id="ion-checkmark-circled">
<path d="M256 32C132.3 32 32 132.3 32 256s100.3 224 224 224 224-100.3 224-224S379.7 32 256 32zm114.9 149.1L231.8 359.6c-1.1 1.1-2.9 3.5-5.1 3.5-2.3 0-3.8-1.6-5.1-2.9-1.3-1.3-78.9-75.9-78.9-75.9l-1.5-1.5c-.6-.9-1.1-2-1.1-3.2 0-1.2.5-2.3 1.1-3.2.4-.4.7-.7 1.1-1.2 7.7-8.1 23.3-24.5 24.3-25.5 1.3-1.3 2.4-3 4.8-3 2.5 0 4.1 2.1 5.3 3.3 1.2 1.2 45 43.3 45 43.3l111.3-143c1-.8 2.2-1.4 3.5-1.4 1.3 0 2.5.5 3.5 1.3l30.6 24.1c.8 1 1.3 2.2 1.3 3.5.1 1.3-.4 2.4-1 3.3z"></path>
</symbol>
<symbol viewBox="0 0 512 512" id="ion-social-github">
<path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"></path>
</symbol>
</defs>
</svg>
<script src="bundle.js"></script>
<script>
$(document).ready(function(){
$('#dom_mutation_demo').selectDropdown({
hideSelect: false
});
$('#insert_value').click(function(){
var count = $('#dom_mutation_demo').find('option').length;
var randSelect = Math.floor(Math.random() * count) + 1 ;
var $randSelect = $('#dom_mutation_demo').find('option').eq( randSelect );
$randSelect.after( $randSelect.clone() );
});
$('#remove_value').click(function(){
var count = $('#dom_mutation_demo').find('option').length;
var randSelect = Math.floor(Math.random() * count) + 1 ;
var $randSelect = $('#dom_mutation_demo').find('option').eq( randSelect );
$randSelect.remove();
});
});
</script>
</body>
</html>