or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mddisplay.mdevents.mdindex.mdinitialization.mdinternationalization.mdselection.md
tile.json

tessl/npm-bootstrap-select

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/bootstrap-select@1.13.x

To install, run

npx @tessl/cli install tessl/npm-bootstrap-select@1.13.0

index.mddocs/

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;
  };
}