Pretty jQuery Searchable Multi Select Box For Bootstrap - selectr
File Size: | 92.3 KB |
---|---|
Views Total: | 15679 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.