Select2 – The jQuery replacement for Select Boxes

Select2

The Select Form Field Select2 is the encompassing profi Tool under the whole Select-Replacement scripts. It has dozens of options in the constructor and many configuration possibilities through custom attributes on the source field as well. It is completely translatable and supports 8, 8, 10, 10.6 and 3, but you may need an older jQuery version, which supports this browser too.

The Script itself comes also with an complete exensible environment, dynamic manipulation of the options and AJAX / RemoteData Support. Select2 is also available for Django, Drupal, Meteor, Ruby on Rails, Wicket, Yii2 and – of course – AngularJS. Official custom Themes, like Bootstrap3, FlatUI and MetroUI are currently present and usable as well!

Download the latest version of Select2 as .ZIP or as .TAR package!

npm i select2 --save

yarn add select2 --save

bower install select2 --save

Instructions

The package itself contains some default stylings, available as normal and minified CSS Stylesheet. The JavaScript itself is available in a “Default User” and “Full Featured” Version, both are available as minified and unminified file. The i18n folder contains contains to it also 56 different languages, so there should be something suitable for the most use cases and websites.

 

Load Select2

We recommend to load the Stylesheet directly in the HTML header within your Document. The JavaScript itself should be loaded directly after the opened HTML <body> tag. Theoretically, you can put this somewhere else too, just make sure, that jQuery is loaded BEFORE you include the Script.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/select2.css" />
    </head>
    <body>
        <!-- Required jQuery Library -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/select2.min.js"></script>
    </body>
</html>

 

Configure Select2

It would be impossible to include the complete documentation on a single page and keep the use- and readability. So we highly recommend to visit and read the official documentation which is really well laid out. Nevertheless, we let at least a few configuration options here:

jQuery(document).ready(function(){
    $("select").select2({
        adaptContainerCssClass:     null,
        adaptDropdownCssClass:      null,
        ajax:                       null,
        allowClear:                 false,
        amdBase:                    "./"
        amdLanguageBase:            "./i18n/"
        closeOnSelect:              true,
        containerCss:               null,
        data:                       null,
        dataAdapter:                SelectAdapter,
        debug:                      false,
        dir:                        null,
        disabled:                   false,
        dropdownAdapter:            DropdownAdapter,
        dropdownAutoWidth:          false,
        dropdownCss:                null,
        dropdownCssClass:           "",
        dropdownParent:             $(document.body),
        escapeMarkup:               Utils.escapeMarkup,
        initSelection:              function(){ },          # Deprecated
        language:                   "en",
        matcher:                    function(){ },
        maximumInputLength:         0,
        maximumSelectionLength:     0,
        minimumInputLength:         0,
        minimumResultsForSearch:    0,
        multiple:                   false,
        placeholder:                null,
        query:                      Query,                   # Deprecated
        resultsAdapter:             ResultsAdapter,
        selectionAdapter:           SingleSelection,
        selectOnClose:              false,
        sorter:                     function(){ },
        tags:                       false,
        templateResult:             function(){ },
        templateSelection:          function(){ },
        theme:                      "default",
        tokenizer:                  function(){ },
        tokenSeparators:            [],
        width:                      "resolve"
    });
});

 

Configure: Options

ajax
Provides support for ajax data sources.
allowClear
Provides support for clearable selections.
closeOnSelect
Controls whether the dropdown is closed after a selection is made.
data
Used to override the built-in DataAdapter.
debug
Enable debugging messages in the browser console.
disabled
When set to true, the select control will be disabled.
dropdownParent
Allows you to customize placement of the dropdown.
language
Specify the language used for Select2 messages.
maximumInputLength
Maximum number of characters that may be provided for a search term.
maximumSelectionLength
The maximum number of items that may be selected in a multi-select control. If the value of this option is less than 1, the number of selected items will not be limited.
minimumInputLength
Minimum number of characters required to start a search.
minimumResultsForSearch
The minimum number of results required to display the search box.
multiple
This option enables multi-select (pillbox) mode. Select2 will automatically map the value of the multiple HTML attribute to this option during initialization.
placeholder
Specifies the placeholder for the control.
selectOnClose
Implements automatic selection when the dropdown is closed.
tags
Used to enable free text responses.
templateResult
Customizes the way that search results are rendered.
templateSelection
Customizes the way that selections are rendered.
theme
Allows you to set the theme.
tokenizer
A callback that handles automatic tokenization of free-text entry.
tokenSeparators
The list of characters that should be used as token separators.
width
Supports customization of the container width.

Leave a Reply

Top