This time I will share jQuery Plugin and tutorial about jQuery Plugin For Filterable Bootstrap Dropdown Select – Bootstrap Select, hope it will help you in programming stack.
| File Size: | 260 KB |
|---|---|
| Views Total: | 65982 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Bootstrap Select is a jQuery plugin to enhance the default Bootstrap dropdown select with multiple options like: optgoup support, auto-completion, clear selection and live filtering.
Dependencies:
- jQuery.
- Bootstrap 5 (beta), Bootstrap 4, or Bootstrap 3
- Font Awesome icons (For Bootstrap 4).
- Ajax-Bootstrap-Select (for AJAX data fetching). OPTIONAL.
Installation:
1 |
# Yarn |
2 |
$ yarn add bootstrap-select |
3 |
4 |
# NPM |
5 |
$ npm install bootstrap-select --save |
How to use it:
1. Include the jQuery Bootstrap Select plugin and other required resources into your Bootstrap page.
01 |
<!-- Bootstrap Stylesheet --> |
02 |
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> |
03 |
04 |
<!-- Bootstrap Select Stylesheet --> |
05 |
<link href="/path/to/bootstrap-select.min.css" rel="stylesheet"> |
06 |
07 |
<!-- Bootstrap JavaScript --> |
08 |
<script src="/path/to/cdn/jquery.slim.min.js"></script> |
09 |
<script src="/path/to/cdn/bootstrap.min.js"></script> |
10 |
11 |
<!-- Bootstrap Select Main JavaScript --> |
12 |
<script src="/path/to/bootstrap-select.min.js"></script> |
13 |
14 |
<!-- Bootstrap Select Language JavaScript --> |
15 |
<script src="/path/to/i18n/defaults-LANGUAGE.min.js"></script> |
2. Just add the class ‘selectpicker’ to your select element and done.
1 |
<select class="selectpicker"> |
2 |
<option>1</option> |
3 |
<option>2</option> |
4 |
<option>3</option> |
5 |
<option>4</option> |
6 |
<option>5</option> |
7 |
</select> |
3. You can also initialize the plugin by call the function on the ‘select’ element.
1 |
$('select').selectpicker(); |
4. All default plugin settings.
001 |
$('select').selectpicker({ |
002 |
003 |
// text for none selected |
004 |
noneSelectedText: 'Nothing selected', |
005 |
006 |
// text for no results |
007 |
noneResultsText: 'No results matched {0}', |
008 |
countSelectedText: function (numSelected, numTotal) { |
009 |
return (numSelected == 1) ? "{0} item selected" : "{0} items selected"; |
010 |
}, |
011 |
012 |
// text for max options |
013 |
maxOptionsText: function (numAll, numGroup) { |
014 |
return [ |
015 |
(numAll == 1) ? 'Limit reached ({n} item max)' : 'Limit reached ({n} items max)', |
016 |
(numGroup == 1) ? 'Group limit reached ({n} item max)' : 'Group limit reached ({n} items max)' |
017 |
]; |
018 |
}, |
019 |
020 |
// text for select all |
021 |
selectAllText: 'Select All', |
022 |
023 |
// text for deselect all |
024 |
deselectAllText: 'Deselect All', |
025 |
026 |
// enables done button |
027 |
doneButton: false, |
028 |
029 |
// text for done button |
030 |
doneButtonText: 'Close', |
031 |
032 |
// custom separator |
033 |
multipleSeparator: ', ', |
034 |
035 |
// basic class |
036 |
styleBase: 'btn', |
037 |
038 |
// button classes |
039 |
style: classNames.BUTTONCLASS, |
040 |
041 |
// 'auto' | integer | false |
042 |
size: 'auto', |
043 |
044 |
// title for dropdown select |
045 |
title: null, |
046 |
047 |
// values' | 'static' | 'count' | 'count > x' |
048 |
selectedTextFormat: 'values', |
049 |
050 |
// width |
051 |
width: false, |
052 |
053 |
// string | false |
054 |
container: false, |
055 |
056 |
// hides disabled options |
057 |
hideDisabled: false, |
058 |
059 |
// shows sub text |
060 |
showSubtext: false, |
061 |
062 |
// shows icons |
063 |
showIcon: true, |
064 |
065 |
// shows content |
066 |
showContent: true, |
067 |
068 |
// auto reposition to fit screen |
069 |
dropupAuto: true, |
070 |
071 |
// adds a header to the dropdown select |
072 |
header: false, |
073 |
074 |
// live filter options |
075 |
liveSearch: false, |
076 |
liveSearchPlaceholder: null, |
077 |
liveSearchNormalize: false, |
078 |
liveSearchStyle: 'contains', |
079 |
080 |
// shows Select All & Deselect All |
081 |
actionsBox: false, |
082 |
083 |
// icon base |
084 |
iconBase: 'glyphicon', |
085 |
086 |
// tick icon |
087 |
tickIcon: 'glyphicon-ok', |
