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.
167 lines (140 loc) • 8.71 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 active" 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 " 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>Getting started</h2>
</div>
<h3>Quick start</h3>
<p class="highlight">
Get started quickly by using CDNs/hosted files.
</p>
<p>
The following code demonstrates embedding files for both Bootstrap and Bootstrap Select Dropdown. Check <a href="https://getbootstrap.com/docs/4.1/getting-started/introduction/" target="_blank">Introduction | Bootstrap</a> for the latest versions.
</p>
<pre><code><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.2.0/fuse.min.js"></script>
<script src="bootstrap-select-dropdown.min.js"></script></code></pre>
<h3>npm</h3>
<p>
Install Bootstrap Select Dropdown in your Node.js apps with <a href="https://www.npmjs.com/package/bootstrap-select-dropdown"></a>the npm package</a>.
</p>
<pre><code>npm install bootstrap-select-dropdown</code></pre>
<h3>Webpack</h3>
<p class="highlight">
Include Bootstrap Select Dropdown in your Bootstrap project using Webpack.
</p>
<p>
Import Bootstrap Select Dropdown by importing in your app's entry point.
</p>
<pre><code>import 'bootstrap-select-dropdown'</code></pre>
<p>
If using search, Bootstrap Select Dropdown depends on <a href="http://fusejs.io/">Fuse.js</a>. In this case, include Fuse.js in your <code>package.json</code> using <code>npm install --save fuse.js</code>.
</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>