Bootstrap-Select is a select dropdown jQuery plugin to modified with default Bootstrap dropdown select with multiple options like: outgroup support, auto-completion, clear selection and search live filtering. you can choose multiple select in select box. Bootstrap-select is fully support with Bootstrap 3/4 select dropdown.
Bootstrap 3 Demo : Bootstrap 3 Select Dropdown With Filter Search In jQuery Plugin
Table of Contents
How to used :
Dependencies:
- jQuery.
- Bootstrap 4 or Bootstrap 3 framework.
- Font Awesome icons (For Bootstrap 4).
- Ajax-Bootstrap-Select (for AJAX data fetching). OPTIONAL.
Installation:
# Yarn
$ yarn add bootstrap-select
# NPM
$ npm install bootstrap-select --save
Include the jQuery Bootstrap Select plugin and other required resources into your Bootstrap page.
<!-- Bootstrap 4 Stylesheet -->
<link rel="stylesheet" href=/css/bootstrap.min.css">
<!-- Bootstrap Select Stylesheet -->
<link href="/path/to/bootstrap-select.min.css" rel="stylesheet">
<!-- Bootstrap 4 JavaScript -->
<script src="/jquery-3.3.1.slim.min.js"></script>
<script src="/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<!-- Bootstrap Select Main JavaScript -->
<script src="/path/to/bootstrap-select.min.js"></script>
<!-- Bootstrap Select Language JavaScript -->
<script src="/path/to/i18n/defaults-LANGUAGE.min.js"></script>
Just add the class ‘selectpicker’ to your select element and done.
<select class="selectpicker">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
You can also initialize the plugin by call the function on the ‘select’ element.
$('select').selectpicker();
All default plugin settings.
$('select').selectpicker({
// text for none selected
noneSelectedText: 'Nothing selected',
// text for no results
noneResultsText: 'No results matched {0}',
countSelectedText: function (numSelected, numTotal) {
return (numSelected == 1) ? "{0} item selected" : "{0} items selected";
},
// text for max options
maxOptionsText: function (numAll, numGroup) {
return [
(numAll == 1) ? 'Limit reached ({n} item max)' : 'Limit reached ({n} items max)',
(numGroup == 1) ? 'Group limit reached ({n} item max)' : 'Group limit reached ({n} items max)'
];
},
// text for select all
selectAllText: 'Select All',
// text for deselect all
deselectAllText: 'Deselect All',
// enables done button
doneButton: false,
// text for done button
doneButtonText: 'Close',
// custom separator
multipleSeparator: ', ',
// basic class
styleBase: 'btn',
// button classes
style: classNames.BUTTONCLASS,
// 'auto' | integer | false
size: 'auto',
// title for dropdown select
title: null,
// values' | 'static' | 'count' | 'count > x'
selectedTextFormat: 'values',
// width
width: false,
// string | false
container: false,
// hides disabled options
hideDisabled: false,
// shows sub text
showSubtext: false,
// shows icons
showIcon: true,
// shows content
showContent: true,
// auto reposition to fit screen
dropupAuto: true,
// adds a header to the dropdown select
header: false,
// live filter options
liveSearch: false,
liveSearchPlaceholder: null,
liveSearchNormalize: false,
liveSearchStyle: 'contains',
// shows Select All & Deselect All
actionsBox: false,
// icon base
iconBase: 'glyphicon',
// tick icon
tickIcon: 'glyphicon-ok',
// shows tick
showTick: false,
// custom template
template: {
caret: '<span class="caret"></span>'
},
// integer | false
maxOptions: false,
// enables the device's native select for the dropdown select
mobile: false,
// if true, treats the tab character like the enter or space characters within the selectpicker dropdown.
selectOnTab: false,
// boolean | 'auto'
dropdownAlignRight: false,
// padding
windowPadding: 0,
// If enabled, the items in the dropdown will be rendered using virtualization (i.e. only the items that are within the viewport will be rendered).
// This drastically improves performance for selects with a large number of options.
// Set to an integer to only use virtualization if the select has at least that number of options.
virtual<a href="http://www.jquerypost.com/tag/scroll/">Scroll</a>: 600
});
API methods.
// Sets the selected value
$('.selectpicker').selectpicker('val', 'Mustard');
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);
// Selects all items
$('.selectpicker').selectpicker('selectAll');
// Deselects all items
$('.selectpicker').selectpicker('deselectAll');
// Re-renders the plugin
$('.selectpicker').selectpicker('render')
$('.selectpicker').selectpicker('render');
// Enables mobile scrolling
$('.selectpicker').selectpicker('mobile')
// Modifies the class(es)
$('.selectpicker').selectpicker('setStyle')
// Replace Class
$('.selectpicker').selectpicker('setStyle', 'btn-danger');
// Add Class
$('.selectpicker').selectpicker('setStyle', 'btn-large', 'add');
// Remove Class
$('.selectpicker').selectpicker('setStyle', 'btn-large', 'remove');
// Programmatically up<a href="http://www.jquerypost.com/category/time-clock/">date</a>s a select
$('.selectpicker').selectpicker('refresh')
// Programmatically toggles the select
$('.selectpicker').selectpicker('toggle')
// Hides the select
$('.selectpicker').selectpicker('hide')
// Shows the select
$('.selectpicker').selectpicker('show')
// Destroy the select
$('.selectpicker').selectpicker('destroy')
Event handlers available.
$('.selectpicker').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
// do something...
});
$('.selectpicker').on('show.bs.select', function (relatedTarget) {
// do something...
});
$('.selectpicker').on('shown.bs.select', function (relatedTarget) {
// do something...
});
$('.selectpicker').on('hide.bs.select', function (relatedTarget) {
// do something...
});
$('.selectpicker').on('hidden.bs.select', function (relatedTarget) {
// do something...
});
$('.selectpicker').on('loaded.bs.select', function () {
// do something...
});
$('.selectpicker').on('rendered.bs.select', function () {
// do something...
});
$('.selectpicker').on('refreshed.bs.select', function () {
// do something...
});
To use a remote data source you need load the Ajax-Bootstrap-Select extension in the document.
<link rel="stylesheet" href="/dist/css/ajax-bootstrap-select.css"/>
<script src="/dist/js/ajax-bootstrap-select.js"></script>
Add the data-live-search attribute to the select element.
<select id="selectpicker" class="selectpicker" data-live-search="true">
...
</select>
The example JavaScript to fetch options from a remote data source using AJAX.
var options = {
ajax : {
url : '/ajax',
type : 'POST',
dataType: 'json',
// Use "{{{q}}}" as a placeholder and Ajax Bootstrap Select will
// automatically replace it with the value of the search query.
data : {
q: '{{{q}}}'
}
},
locale : {
emptyTitle: 'Select and Begin Typing'
},
log : 3,
preprocessData: function (data) {
var i, l = data.length, array = [];
if (l) {
for (i = 0; i < l; i++) {
array.push($.extend(true, data[i], {
text : data[i].Name,
value: data[i].Email,
data : {
subtext: data[i].Email
}
}));
}
}
// You must always return a valid array when processing data. The
// data argument passed is a clone and cannot be modified directly.
return array;
}
};
$('.selectpicker').selectpicker().filter('.with-ajax').ajaxSelectPicker(options);
All possible options to customize the Ajax-Bootstrap-Select extension.
/**
* @member $.fn.ajaxSelectPicker.defaults
* @deprecated Since version `1.2.0`, see: {@link $.fn.ajaxSelectPicker.defaults#preprocessData}.
* @cfg {Function} ajaxResultsPreHook
*/
/**
* @member $.fn.ajaxSelectPicker.defaults
* @cfg {Object} ajax (required)
* @markdown
* The options to pass to the jQuery AJAX request.
*
* ```js
* {
* url: null, // Required.
* type: 'POST',
* dataType: 'json',
* data: {
* q: '{{{q}}}'
* }
* }
* ```
*/
ajax: {
url: null,
type: 'POST',
dataType: 'json',
data: {
q: '{{{q}}}'
}
},
/**
* @member $.fn.ajaxSelectPicker.defaults
* @cfg {Number} minLength = 0
* @markdown
* Invoke a request for empty search values.
*/
minLength: 0,
/**
* @member $.fn.ajaxSelectPicker.defaults
* @cfg {String} ajaxSearchUrl
* @deprecated Since version `1.2.0`, see: {@link $.fn.ajaxSelectPicker.defaults#ajax}.
*/
/**
* @member $.fn.ajaxSelectPicker.defaults
* @cfg {String} bindEvent = "keyup"
* @markdown
* The event to bind on the search input element to fire a request.
*/
bindEvent: 'keyup',
/**
* @member $.fn.ajaxSelectPicker.defaults
* @cfg {Boolean} cache = true
* @markdown
* Cache previous requests. If enabled, the "enter" key (13) is enabled to
* allow users to force a refresh of the request.
*/
cache: true,
/**
* @member $.fn.ajaxSelectPicker.defaults
* @cfg {Boolean} clearOnEmpty = true
* @markdown
* Clears the previous results when the search input has no value.
*/
clearOnEmpty: true,
/**
* @member $.fn.ajaxSelectPicker.defaults
* @cfg {Boolean} clearOnError = true
* @markdown
* Clears the select list when the request returned with an error.
*/
clearOnError: true,
/**
* @member $.fn.ajaxSelectPicker.defaults
* @cfg {Boolean} debug
* @deprecated Since version `1.2.0`, see: {@link $.fn.ajaxSelectPicker.defaults#log}.
*/
/**
* @member $.fn.ajaxSelectPicker.defaults
* @cfg {Boolean} emptyRequest = false
* @markdown
* Invoke a request for empty search values.
*/
emptyRequest: false,
/**
* @member $.fn.ajaxSelectPicker.defaults
* @cfg {Object} ignoredKeys
* @markdown
* Key codes to ignore so a request is not invoked with bindEvent. The
* "enter" key (13) will always be dynamically added to any list provided
* unless the "cache" option above is set to "true".
*
* ```js
* {
* 9: "tab",
* 16: "shift",
* 17: "ctrl",
* 18: "alt",
* 27: "esc",
* 37: "left",
* 39: "right",
* 38: "up",
* 40: "down",
* 91: "meta"
* }
* ```
*/
ignoredKeys: {
9: "tab",
16: "shift",
17: "ctrl",
18: "alt",
27: "esc",
37: "left",
39: "right",
38: "up",
40: "down",
91: "meta"
},
/**
* @member $.fn.ajaxSelectPicker.defaults
* @cfg {String} langCode = null
* @markdown
* The language code to use for string translation. By default this value
* is determined by the browser, however it is not entirely reliable. If
* you encounter inconsistencies, you may need to manually set this option.
*/
langCode: null,
/**
* @member $.fn.ajaxSelectPicker.defaults
* @cfg {Object} locale = null
* @markdown
* Provide specific overrides for {@link $.fn.ajaxSelectPicker.locale locale string} translations. Values
* set here will cause the plugin to completely ignore defined locale string
* translations provided by the set language code. This is useful when
* needing to change a single value or when being used in a system that
* provides its own translations, like a CMS.
*
* ```js
* locale: {
* searchPlaceholder: Drupal.t('Find...')
* }
* ```
*/
locale: null,
/**
* @member $.fn.ajaxSelectPicker.defaults
* @cfg {String|Number|Number} log = 'error'
* @markdown
* Determines the amount of logging that is displayed:
*
* - __0, false:__ Display no information from the plugin.
* - __1, 'error':__ Fatal errors that prevent the plugin from working.
* - __2, 'warn':__ Warnings that may impact the display of request data, but does not prevent the plugin from functioning.
* - __3, 'info':__ Provides additional information, generally regarding the from request data and callbacks.
* - __4, true, 'debug':__ Display all possible information. This will likely be highly verbose and is only recommended for development purposes or tracing an error with a request.
*/
log: 'error',
/**
* @member $.fn.ajaxSelectPicker.defaults
* @cfg {Boolean} mixWithCurrents
* @deprecated Since version `1.2.0`, see: {@link $.fn.ajaxSelectPicker.defaults#preserveSelected}.
*/
/**
* @member $.fn.ajaxSelectPicker.defaults
* @cfg placeHolderOption
* @deprecated Since version `1.2.0`, see: {@link $.fn.ajaxSelectPicker.locale#emptyTitle}.
*/
/**
* @member $.fn.ajaxSelectPicker.defaults
* @cfg {Function|null} preprocessData = function(){}
* @markdown
* Process the raw data returned from a request.
*
* The following arguments are passed to this callback:
*
* - __data__ - `Array` The raw data returned from the request, passed by reference.
*
* This callback must return one of the following:
*
* - `Array` - A new array of items. This will replace the passed data.
* - `undefined|null|false` - Stops the callback and will use whatever modifications have been made to data.
*
* ```js
* function (data) {
* var new = [], old = [], other = [];
* for (var i = 0; i < data.length; i++) {
* // Add items flagged as "new" to the correct array.
* if (data[i].new) {
* new.push(data[i]);
* }
* // Add items flagged as "old" to the correct array.
* else if (data[i].old) {
* old.push(data[i]);
* }
* // Something out of the ordinary happened, put these last.
* else {
* other.push(data[i]);
* }
* }
* // Sort the data according to the order of these arrays.
* return [].concat(new, old, other).
* }
* ```
*/
preprocessData: function () { },
/**
* @member $.fn.ajaxSelectPicker.defaults
* @cfg {Boolean} preserveSelected = true
* @markdown
* Preserve selected items(s) between requests. When enabled, they will be
* placed in an `<optgroup>` with the label `Currently Selected`. Disable
* this option if you send your currently selected items along with your
* request and let the server handle this responsibility.
*/
preserveSelected: true,
/**
* @member $.fn.ajaxSelectPicker.defaults
* @cfg {String} preserveSelectedPosition = 'after'
* @markdown
* Place the currently selected options `'before'` or `'after'` the options
* returned from the request.
*/
preserveSelectedPosition: 'after',
/**
* @member $.fn.ajaxSelectPicker.defaults
* @cfg {Function|null} processData = function(){}
* @markdown
* Process the data returned after this plugin, but before the list is built.
*/
processData: function () { },
/**
* @member $.fn.ajaxSelectPicker.defaults
* @cfg {Number} requestDelay = 300
* @markdown
* The amount of time, in milliseconds, that must pass before a request
* is initiated. Each time the {@link $.fn.ajaxSelectPicker.defaults#bindEvent bindEvent} is fired, it will cancel the
* current delayed request and start a new one.
*/
requestDelay: 300,
/**
* @member $.fn.ajaxSelectPicker.defaults
* @cfg {Boolean} restoreOnError = false
* @markdown
* Restores the select list with the previous results when the request
* returns with an error.
*/
restoreOnError: false,
/**
* @member $.fn.ajaxSelectPicker.defaults
* @cfg {Object} templates
* @markdown
* The DOM templates used in this plugin.
*
* ```js
* templates: {
* // The placeholder for status updates pertaining to the list and request.
* status: '<div class="status"></div>',
* }
* ```
*/
templates: {
status: '<div class="status"></div>'
}
Done
Thanks for make jQuery plugin is developed by snapappointments For more Helpfull for users, please check the demo page or visit the official website.
