tessl/npm-select2

Select2 is a jQuery based replacement for select boxes with searching, remote data sets, and infinite scrolling support

—

Pending

Overview

Eval results

Files

Configuration Options

Name: tessl/npm-select2
Author: tessl

Comprehensive configuration system supporting data sources, UI customization, search behavior, multi-select options, and advanced adapter settings.

Capabilities

Core Configuration Interface

Main configuration object with all available options for customizing Select2 behavior.

/**
 * Complete Select2 configuration options
 */
interface Select2Options {
    // Data Source Options
    ajax?: AjaxOptions;
    data?: DataObject[];
    
    // Basic UI Options
    placeholder?: string | PlaceholderObject;
    allowClear?: boolean;
    multiple?: boolean;
    disabled?: boolean;
    
    // Search and Input Options
    minimumInputLength?: number;
    maximumInputLength?: number;
    minimumResultsForSearch?: number;
    
    // Selection Limits
    maximumSelectionLength?: number;
    
    // Display and Styling
    width?: string;
    theme?: string;
    containerCss?: object;
    containerCssClass?: string;
    dropdownCss?: object;
    dropdownCssClass?: string;
    dropdownParent?: jQuery;
    dropdownAutoWidth?: boolean;
    
    // Template Functions
    templateResult?: (result: DataObject) => string | jQuery;
    templateSelection?: (selection: DataObject) => string | jQuery;
    escapeMarkup?: (markup: string) => string;
    
    // Behavior Options
    closeOnSelect?: boolean;
    selectOnClose?: boolean;
    scrollAfterSelect?: boolean;
    
    // Advanced Options
    language?: string | object | string[];
    matcher?: (params: SearchParams, data: DataObject) => DataObject | null;
    sorter?: (data: DataObject[]) => DataObject[];
    
    // Tag Options
    tags?: boolean | string[];
    tokenSeparators?: string[];
    tokenizer?: (input: string, selection: DataObject[], selectCallback: Function, options: any) => string;
    createTag?: (params: CreateTagParams) => DataObject | null;
    insertTag?: (data: DataObject[], tag: DataObject) => void;
    
    // Adapter Overrides
    dataAdapter?: any;
    resultsAdapter?: any;
    selectionAdapter?: any;
    dropdownAdapter?: any;
    
    // Debug Options
    debug?: boolean;
}

Basic UI Configuration

Essential options for controlling Select2's appearance and basic behavior.

/**
 * Placeholder configuration
 */
interface PlaceholderObject {
    id: string;
    text: string;
}

// Basic UI options
placeholder?: string | PlaceholderObject;
allowClear?: boolean;        // Enable clear button (single select only)
multiple?: boolean;          // Enable multi-select mode
disabled?: boolean;          // Disable the control
width?: string;             // Control width: 'resolve', 'element', 'style', or CSS value
theme?: string;             // Theme name (default: 'default')

Usage Examples:

// Basic placeholder
$('#select1').select2({
    placeholder: "Choose an option"
});

// Placeholder object with ID
$('#select2').select2({
    placeholder: {
        id: "",
        text: "Select something..."
    }
});

// Multi-select with clear
$('#multi-select').select2({
    multiple: true,
    allowClear: true,
    width: '100%'
});

// Custom width and theme
$('#themed-select').select2({
    width: '300px',
    theme: 'bootstrap4'
});

Search and Input Configuration

Options controlling search behavior, input validation, and filtering.

// Search configuration
minimumInputLength?: number;        // Minimum characters before search (default: 0)
maximumInputLength?: number;        // Maximum input length (default: 0 = unlimited)
minimumResultsForSearch?: number;   // Minimum results to show search box (default: 0)
maximumSelectionLength?: number;    // Maximum selections for multi-select (default: 0 = unlimited)

Usage Examples:

// Require minimum input for search
$('#search-select').select2({
    minimumInputLength: 2,
    ajax: {
        url: '/api/search',
        // ... ajax config
    }
});

// Limit input length and selections
$('#limited-select').select2({
    multiple: true,
    maximumInputLength: 50,
    maximumSelectionLength: 3
});

// Hide search box for small result sets
$('#no-search-select').select2({
    minimumResultsForSearch: 10
});

Display and Styling Configuration

Options for customizing appearance, CSS, and rendering templates.

// Styling options
containerCss?: object;              // CSS styles for main container
containerCssClass?: string;         // CSS classes for main container  
dropdownCss?: object;              // CSS styles for dropdown
dropdownCssClass?: string;         // CSS classes for dropdown
dropdownParent?: jQuery;           // Custom dropdown container
dropdownAutoWidth?: boolean;       // Auto-size dropdown width

// Template functions
templateResult?: (result: DataObject) => string | jQuery;
templateSelection?: (selection: DataObject) => string | jQuery;
escapeMarkup?: (markup: string) => string;

Usage Examples:

// Custom CSS styling
$('#styled-select').select2({
    containerCss: {
        'border-radius': '0px',
        'border': '2px solid #blue'
    },
    containerCssClass: 'my-custom-select',
    dropdownCssClass: 'my-dropdown'
});

// Custom templates
$('#template-select').select2({
    templateResult: function(result) {
        if (!result.id) return result.text;
        
        return $('<span><i class="icon-' + result.id + '"></i> ' + result.text + '</span>');
    },
    templateSelection: function(selection) {
        return selection.text || selection.id;
    }
});

// Custom dropdown parent
$('#modal-select').select2({
    dropdownParent: $('#myModal')
});

Behavior Configuration

Options controlling Select2's interactive behavior and user experience.

// Behavior options
closeOnSelect?: boolean;        // Close dropdown after selection (default: true)
selectOnClose?: boolean;        // Auto-select highlighted option on close (default: false)
scrollAfterSelect?: boolean;    // Control scrolling after selection (default: false)

Usage Examples:

// Keep dropdown open after selection (useful for multi-select)
$('#multi-open-select').select2({
    multiple: true,
    closeOnSelect: false
});

// Auto-select on close
$('#auto-select').select2({
    selectOnClose: true
});

Advanced Configuration

Advanced options for custom matching, sorting, and language settings.

// Advanced options
language?: string | object | string[];
matcher?: (params: SearchParams, data: DataObject) => DataObject | null;
sorter?: (data: DataObject[]) => DataObject[];

interface SearchParams {
    term: string;
}

Usage Examples:

// Custom language
$('#lang-select').select2({
    language: 'es'  // Spanish translations
});

// Custom matcher for fuzzy search
$('#fuzzy-select').select2({
    matcher: function(params, data) {
        if ($.trim(params.term) === '') {
            return data;
        }
        
        var term = params.term.toLowerCase();
        var text = data.text.toLowerCase();
        
        // Simple fuzzy matching
        if (text.indexOf(term) > -1) {
            return data;
        }
        
        return null;
    }
});

// Custom sorter
$('#sorted-select').select2({
    sorter: function(data) {
        return data.sort(function(a, b) {
            return a.text.localeCompare(b.text);
        });
    }
});

Tag Configuration

Options for enabling and customizing tag creation functionality.

// Tag options
tags?: boolean | string[];
tokenSeparators?: string[];
tokenizer?: (input: string, selection: DataObject[], selectCallback: Function, options: any) => string;
createTag?: (params: CreateTagParams) => DataObject | null;
insertTag?: (data: DataObject[], tag: DataObject) => void;

interface CreateTagParams {
    term: string;
}

Usage Examples:

// Basic tag creation
$('#tag-select').select2({
    tags: true,
    tokenSeparators: [',', ' ']
});

// Predefined tags
$('#predefined-tags').select2({
    tags: ['red', 'blue', 'green', 'yellow']
});

// Custom tag creation
$('#custom-tags').select2({
    tags: true,
    createTag: function(params) {
        var term = $.trim(params.term);
        
        if (term === '') {
            return null;
        }
        
        return {
            id: term,
            text: term + ' (new)',
            newTag: true
        };
    },
    insertTag: function(data, tag) {
        // Insert at beginning
        data.unshift(tag);
    }
});

Debug Configuration

Options for enabling debug output and development assistance.

// Debug options
debug?: boolean;    // Enable debug logging to console

Usage Examples:

// Enable debug mode
$('#debug-select').select2({
    debug: true,
    ajax: {
        url: '/api/data'
    }
});

Configuration Validation

Select2 performs automatic validation and fallback for configuration options:

// Invalid configurations are ignored or receive defaults
$('#select').select2({
    minimumInputLength: -1,    // Becomes 0
    width: 'invalid',          // Falls back to 'resolve'
    nonExistentOption: true    // Ignored silently
});

Install with Tessl CLI