jQuery Select2

Customizable select box with support for searching, tagging and remote data sets.

How To

  1. Step 1: Include northwind.xml source files in Logi Info ApplicationInclude northwind.xml source files in Logi Info Application
  2. Step 2: Include Select2 source files in Logi Info ApplicationInclude Select2 source files in Logi Info Application

Features

  • In your language:Select2 comes with support for RTL environments, searching with diacritics and over 40 languages built-in.
  • Remote data support:Using AJAX you can efficiently search large lists of items.
  • Fits in with your theme:Fully skinnable, CSS built with Sass and an optional theme for Bootstrap 3.
  • Fully extensible:Fully skinnable, CSS built with Sass and an optional theme for Bootstrap 3.
  • Dynamic item creation: Allow users to type in a new option and add it on the fly.
  • Full browser support:Support for both modern and legacy browsers is built-in, even including Internet Explorer 8.
Simple Select2

Customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

Select2 Multiple Selections and Tagging
Select2 Data Example
Lazy Loading Example with Pagination
Options
ParamDescription
placeholder (string):Select2 supports displaying a placeholder by default using the placeholder option. This can be either a data object matching the placeholder option, or a string to display as the placeholder if you are using a blank placeholder option.
allowClear(true/false):Clear the selected results. Setting this option to true will enable an x icon that will reset the selection to the placeholder.
templateSelection(integer):When a selection is made by the user Select2 will display the text of the option by default. You can override the display of the selection by setting the templateSelection option to a JavaScript function.
maximumInputLength(integer):Only allow terms up to 20 characters long.
minimumResultsForSearch(integer):At least 20 results must be displayed. Set minimumResultsForSearch: Infinity to hide search box.
selectOnClose(true/false):Highlight result when the dropdown is closed.
closeOnSelect(true/false):Prevent the dropdown from closing when the result is selected.
tags(true/false):Tag selected options
ajax:Supports jQuery.ajax for initialzing data.
data:While Select2 is designed to be used with a <code>select</code> tag the data that is used to search through and display the results can be loaded from a JavaScript array using the <code>data</code> option. This option should be passed in during the initialization of Select2.

Events and Methods

ParamDescription
change:Triggered whenever an option is selected or removed.
select2:close:Triggered whenever the dropdown is closed.
select2:closing:Triggered before the dropdown is closed. This event can be prevented.
select2:open:Triggered whenever the dropdown is opened.
select2:opening:Triggered before the dropdown is opened. This event can be prevented.
select2:select:Triggered whenever a result is selected.
select2:selecting:Triggered before a result is selected. This event can be prevented.
select2:unselect:Triggered whenever a selection is removed.
select2:unselecting:Triggered before a selection is removed. This event can be prevented.