Demo
Inside other widgets
Show Ballon
Show Popup
Loading remote data
Select2 comes with AJAX support built in, using jQuery's AJAX methods. In this example, we can search for repositories using GitHub's API. Select2 supports lazy-appending of results when the result list is scrolled to the end. In order to enable the remote service it must support some sort of a paging mechanism and the query function given to Select2 must take advantage of it.
When using Select2 with remote data, the HTML required for the select is the same as any other Select2. If you need to provide default selections, you just need to include an option for each selection that contains the value and text that should be displayed.
You can configure how Select2 searches for remote data using the ajax option. More information on the individual options that Select2 handles can be found in the options documentation for ajax. 
The Basics
Select2 can take a regular select box like this:
And turn it into this...
Diacritics support
Select2's default matcher will ignore diacritics, making it easier for users to filter results in international selects. Type "aero" into the select below.
Disabled mode
Select2 will respond to the disabled attribute on <select> elements. You can also initialize Select2 with disabled: true to get the same effect.
Disabled results
Select2 will correctly handle the disabled results, both with data coming from a standard select (when the disabled attribute is set) and from remote sources, where the object has disabled: true set.
Events
Select2 will trigger some events on the original select element, allowing you to integrate it with other components. You can find more information on events on the events page.
change is fired whenever an option is selected or removed. You can use the OS default mechanism.

select2:select is fired whenever a result is selected.

select2:unselect is fired whenever a result is unselected. 
Hiding the search box
Select2 allows you to hide the search box depending on the number of options which are displayed. In this example, we use the value -1 to tell Select2 to never display the search box.
Negative values tells Select2 to never display the search box.
Multiple languages
Select2 supports displaying the messages in different languages, as well as providing your own custom messages that can be displayed.
Limiting the number of selections
Select2 multi-value select boxes can set restrictions regarding the maximum number of options selected. The select below is declared with the multiple attribute with maxSelectionLength in the select2 options (In this example, max of 5 options).
Loading array data
Select2 provides a way to load the data from a local array.
You can provide initial selections with array data by providing the option tag for the selected values, similar to how it would be done for a standard select.
Mandatory fields
With a few css/javascript twicks Select2 can mimic the Outsystems behaviour related to mandatory fields. These twicks may need to be adapted to the theme you are using.
Custom matcher
Unlike other dropdowns on this page, this one matches options only if the term appears in the beginning of the string as opposed to anywhere:
Multiple select boxes
Select2 also supports multi-value select boxes. 
Working with Category Dropdown
You can also use the select2 widget with this other two web blocks available on the component : CategoryDropdown and CategoryMultiselectDropdown.
Category Dropdown
CategoryMultiselectDropdown
-1
4
7
9
10
11
12
13
14
15
16
18
19
20
22
23
28
30
34
36
37
38
42
43
44
45
49
-2
1
2
3
5
6
8
17
21
24
25
26
27
29
31
32
33
35
39
40
41
46
47
48
50
Make sure you put the Category Dropdown (or CategoryMultiselectDropdown) widget before Select2.
Placeholders
A placeholder value can be defined and will be displayed until a selection is made.
IMPORTANT!
With single select we have to pass an object to the placeholder option
where the id is the same as the value of the <option> to use as a placeholder.
Select2 uses the placeholder attribute on multiple select boxes, which requires IE 10+.
Programmatic access
Select2 supports methods that allow programmatic control of the component.
Responsive design 
Select2's width can be set to a percentage of its parent to support responsive design. The two Select2 boxes below are styled to 50% and 75% width respectively.
Select2 will do its best to resolve the percent width specified via a css class, but it is not always possible. The best way to ensure that Select2 is using a percent based width is to inline the style declaration into the tag.  
RTL support
Select2 will work on RTL websites if the dir attribute is set on the <select> or any parents of it.
You can also use initialize Select2 with dir: "rtl" set.
Tagging support
Select2 can be used to quickly set up fields used for tagging.
Note that when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far.
Templating
Various display options of the Select2 component can be changed
You can access the <option> element (or <optgroup>) and any attributes on those elements using .element.

Templating is primarily controlled by the templateResult and templateSelection options.
Click here to see your activities