Bootstrap 3/4 Select Dropdown With Filter Search In jQuery Plugin – bootstrap-select

Form
File Size: 30.34 KB
Views Total: 22896 views
Last Update:January 01, 1970
Publish Date: January 01, 1970
Official Website: Go to website
License: MIT
Plugin Author: snapappointments
Demo    Download

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

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.
List Of Version :

Nola Arney

Nola Arney is a full stack web developer who has Author at jQuerypost. Her ambition for development is only matched by his desire to find the perfect meme for every occasion.