Pretty jQuery Searchable Multi Select Box For Bootstrap - selectr

selectr is a jQuery plugin built with Bootstrap that turns the ordinary select list to a searchable select box with multi-select, color-coding, and selection limiting support. All the options can be passed via data attributes or JavaScript.

How to use it:

1. Include the required jQuery library and Twitter Bootstrap3's CSS in the document.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

2. Add the jQuery selectr plugin's Javascript and CSS after jQuery library.

<link rel="stylesheet" href="selectr.css">
<script src="selectr.js"></script>

3. Create the Html for a searchable multi-select box using data attributes.

<select name="demo" data-selectr-opts='{ "title": "Your title", "placeholder": "Search items", "maxSelection": 3 }'  multiple>
<option data-selectr-color="rgb(0, 163, 0)" value="Value 1"> Value 1 </option>
<option data-selectr-color="rgb(255, 0, 151)" value="Value 2" selected> Value 2 </option>
<option data-selectr-color="rgb(159, 0, 167)" value="Value 3"> Value 3 </option>
...
</select>

4. Or using options object from .selectr() call.

<select name="demo" mltiple>
<option data-selectr-color="rgb(0, 163, 0)" value="Value 1"> Value 1 </option>
<option data-selectr-color="rgb(255, 0, 151)" value="Value 2" selected> Value 2 </option>
<option data-selectr-color="rgb(159, 0, 167)" value="Value 3"> Value 3 </option>
...
</select>

<script>
$(document).ready(function () {
$("select").selectr({
"title": "Your title", 
"placeholder": "Search items", 
"maxSelection": 3 
});
});
</script>

5. Options and defaults.

$(document).ready(function () {
$("select").selectr({
Selectr: Selectr,
title: 'Select Options',
placeholder: 'Search',
resetText: 'Clear All',
width: '300px',
maxListHeight: '250px',
tooltipBreakpoint: 25,
maxSelection: NaN 
});
});

Change logs:

2016-07-18

• fix peer dep issue, add deprecation notice, simplify build, update deps

2015-05-07

• Fixed Missing scrollbars in IE8

2015-05-06

• Prevent lag in IE
• Fix UMD

v2.0.0 (2015-01-27)

• Add UMD wrapper

2015-01-27

• v1.1.3

2015-01-24

• Fixed: options with spaces in value not selected

2014-05-13

• Hide footer when nothing selected

---

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