CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-bootstrap-select

jQuery plugin that transforms select elements with multiselection, search, and Bootstrap integration

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

Bootstrap Select

Bootstrap Select is a comprehensive jQuery plugin that transforms standard HTML select elements into advanced dropdown components with intuitive multiselection, real-time search filtering, keyboard navigation, and seamless Bootstrap integration. It automatically adapts to Bootstrap 3 and 4, provides extensive customization options, and supports 41 languages for internationalization.

Package Information

  • Package Name: bootstrap-select
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install bootstrap-select

Core Imports

CDN (recommended):

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/css/bootstrap-select.min.css">

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/js/bootstrap-select.min.js"></script>

Local installation:

// If using module bundlers
require('bootstrap-select');
require('bootstrap-select/dist/css/bootstrap-select.css');

// Or include via script tags
<script src="node_modules/bootstrap-select/dist/js/bootstrap-select.js"></script>
<link rel="stylesheet" href="node_modules/bootstrap-select/dist/css/bootstrap-select.css">

Basic Usage

<!-- HTML -->
<select class="selectpicker" data-live-search="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

<!-- Or initialize via JavaScript -->
<script>
$(document).ready(function() {
  $('.selectpicker').selectpicker({
    liveSearch: true,
    maxOptions: 3
  });
});
</script>

Architecture

Bootstrap Select is built around several key components:

  • jQuery Plugin Interface: Standard jQuery plugin pattern with chainable methods
  • Selectpicker Constructor: Core class managing individual select element instances
  • Event System: Comprehensive event delegation for show/hide/selection changes
  • Configuration System: Data attribute and JavaScript option support
  • Internationalization: Complete i18n support with 41 language packs
  • Bootstrap Integration: Automatic version detection and adaptive styling

Capabilities

Plugin Initialization and Control

Core functionality for initializing, configuring, and controlling selectpicker instances.

// jQuery plugin interface
$.fn.selectpicker(options?: SelectpickerOptions | string, ...args: any[]): JQuery;

// Plugin methods
$.fn.selectpicker.Constructor: typeof Selectpicker;
$.fn.selectpicker.noConflict(): typeof $.fn.selectpicker;

Initialization and Control

Selection Management

Methods for getting, setting, and manipulating selected values and options.

// Core selection methods
.selectpicker('val'): string | string[];
.selectpicker('val', value: string | string[]): JQuery;
.selectpicker('selectAll'): JQuery;
.selectpicker('deselectAll'): JQuery;

Selection Management

Display and Rendering

Controls for updating the visual display, refreshing content, and managing dropdown visibility.

// Display methods
.selectpicker('render'): JQuery;
.selectpicker('refresh'): JQuery;
.selectpicker('show'): JQuery;
.selectpicker('hide'): JQuery;
.selectpicker('toggle'): JQuery;
.selectpicker('setStyle', style: string, status?: string): JQuery;
.selectpicker('mobile'): JQuery;

Display and Rendering

Configuration Options

Comprehensive configuration system supporting both JavaScript options and HTML data attributes.

interface SelectpickerOptions {
  // Display options
  noneSelectedText?: string;
  noneResultsText?: string;
  title?: string | null;
  selectedTextFormat?: 'values' | 'count' | 'static';
  multipleSeparator?: string;
  
  // Search options
  liveSearch?: boolean;
  liveSearchPlaceholder?: string | null;
  liveSearchNormalize?: boolean;
  liveSearchStyle?: 'contains' | 'startsWith';
  
  // Layout options
  size?: 'auto' | number | false;
  width?: string | boolean;
  container?: string | boolean;
  dropupAuto?: boolean;
  dropdownAlignRight?: boolean;
  
  // Advanced options...
}

Configuration Options

Events and Callbacks

Event system for responding to dropdown state changes and user interactions.

// Event types
'show.bs.select': (e: Event) => void;
'shown.bs.select': (e: Event) => void;
'hide.bs.select': (e: Event) => void;
'hidden.bs.select': (e: Event) => void;
'changed.bs.select': (e: Event) => void;
'loaded.bs.select': (e: Event) => void;
'rendered.bs.select': (e: Event) => void;
'refreshed.bs.select': (e: Event) => void;
'maxReached.bs.select': (e: Event) => void;
'maxReachedGrp.bs.select': (e: Event) => void;

Events and Callbacks

Internationalization

Built-in support for 41 languages with customizable text strings and formatting functions.

// Global defaults override
$.fn.selectpicker.defaults = {
  noneSelectedText: 'Nothing selected',
  countSelectedText: function(numSelected: number, numTotal: number): string,
  maxOptionsText: function(numAll: number, numGroup: number): string[],
  // ...other localizable options
};

Internationalization

Types

// Constructor class
class Selectpicker {
  constructor(element: HTMLSelectElement, options: SelectpickerOptions);
  
  // Core methods
  init(): void;
  render(): void;
  refresh(): void;
  destroy(): void;
  
  // Selection methods
  val(): string | string[];
  val(value: string | string[]): void;
  selectAll(): void;
  deselectAll(): void;
  
  // Display methods
  show(): void;
  hide(): void;
  toggle(): void;
}

// Configuration interface
interface SelectpickerOptions {
  // Text display
  noneSelectedText?: string;
  noneResultsText?: string;
  countSelectedText?: (numSelected: number, numTotal: number) => string;
  maxOptionsText?: (numAll: number, numGroup: number) => string[];
  selectAllText?: string;
  deselectAllText?: string;
  doneButtonText?: string;
  multipleSeparator?: string;
  
  // Selection behavior
  title?: string | null;
  selectedTextFormat?: 'values' | 'count' | 'static';
  maxOptions?: number | false;
  
  // Search functionality
  liveSearch?: boolean;
  liveSearchPlaceholder?: string | null;
  liveSearchNormalize?: boolean;
  liveSearchStyle?: 'contains' | 'startsWith';
  
  // Layout and sizing
  size?: 'auto' | number | false;
  width?: string | boolean;
  container?: string | boolean;
  dropupAuto?: boolean;
  dropdownAlignRight?: boolean;
  windowPadding?: number;
  virtualScroll?: number | boolean;
  
  // Appearance
  style?: string;
  styleBase?: string;
  iconBase?: string;
  tickIcon?: string;
  showContent?: boolean;
  showIcon?: boolean;
  showSubtext?: boolean;
  showTick?: boolean;
  
  // Behavior
  mobile?: boolean;
  selectOnTab?: boolean;
  hideDisabled?: boolean;
  actionsBox?: boolean;
  doneButton?: boolean;
  header?: string | boolean;
  display?: boolean;
  
  // Security
  sanitize?: boolean;
  sanitizeFn?: ((unsafeElements: Element[]) => void) | null;
  whiteList?: { [key: string]: string[] };
  
  // Templates
  template?: {
    caret?: string;
  };
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/bootstrap-select@1.13.x
Publish Source
CLI
Badge
tessl/npm-bootstrap-select badge