+ This page refers to an unreleased {{ page.version }} version of Select2 which may be unstable. For the latest stable
+ and previous versions please see links at the top. The code for this version is only available in the master branch.
+
Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute. Select2 automatially picks up on this:
-
-
-
-
-
-
Example Code
+
+
+
Multi-Value Select Boxes
+
Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute. Select2 automatially picks up on this:
+
+
+
+
+
+
Example Code
-
-
+
+
-
-
-
-
Placeholders
-
A placeholder value can be defined and will be displayed until a selection is made:
-
-
-
-
-
-
-
The placeholder can be declared via a data-placeholder attribute attached to the select, or via the placeholder configuration element as seen in the example code.
-
When placeholder is used for a non-multi-value select box, it requires that you include an empty <option></option> tag as your first option.
-
Optionally, a clear button (visible once a selection is made) is available to reset the select box back to the placeholder value.
+
+
+
Placeholders
+
A placeholder value can be defined and will be displayed until a selection is made:
+
+
+
+
+
+
+
The placeholder can be declared via a data-placeholder attribute attached to the select, or via the placeholder configuration element as seen in the example code.
+
When placeholder is used for a non-multi-value select box, it requires that you include an empty <option></option> tag as your first option.
+
Optionally, a clear button (visible once a selection is made) is available to reset the select box back to the placeholder value.
-
-
-
Example Code
+
+
+
Example Code
-
-
+
+
-
-
-
Minimum Input
-
Select2 supports a minimum input setting which is useful for large remote datasets where short search terms are not very useful:
-
-
-
-
-
-
Example Code
-
-
-
+
+
+
Minimum Input
+
Select2 supports a minimum input setting which is useful for large remote datasets where short search terms are not very useful:
+
+
+
+
+
+
Example Code
+
+
+
-
-
-
Templating
-
Various display options of the Select2 component can be changed:
-
-
-
-
-
-
Example Code
-
-
- You can set data- attributes to <option> (or <optgroup>) and use them inside temptlating functions:
-
+
+
+
Templating
+
Various display options of the Select2 component can be changed:
+
+
+
+
+
+
Example Code
+
+
+ You can set data- attributes to <option> (or <optgroup>) and use them inside temptlating functions:
+
Select2 uses a function to load result data. Here is a trivial example that creates choices that consist of user's input repeated a number of times:
-
-
-
-
In order to take advantage of custom data loading Select2 should be attached to an input type='hidden' tag, otherwise data is parsed from select's option tags.
-
-
-
Example Code
+
+
+
Loading Data
+
Select2 uses a function to load result data. Here is a trivial example that creates choices that consist of user's input repeated a number of times:
+
+
+
+
In order to take advantage of custom data loading Select2 should be attached to an input type='hidden' tag, otherwise data is parsed from select's option tags.
+
+
+
Example Code
-
-
+
+
-
-
-
Maximum Selection Size
-
Select2 allows the developer to limit the number of items that can be selected in a multi-select control.
- In the example below only 3 or less items can be selected.
-
-
-
-
-
-
Example Code
+
+
+
Maximum Selection Size
+
Select2 allows the developer to limit the number of items that can be selected in a multi-select control.
+ In the example below only 3 or less items can be selected.
+
+
+
+
+
+
Example Code
-
-
+
+
-
-
-
Loading Array Data
-
Select2 provides some shortcuts that make it easy to access local data stored in an array instead of having to write a query function mentioned in the example above.
-
Example below inlines the data by specifying an array in the data element. Items in such an array must have id and text keys.
-
-
-
-
If your data does not have a text key, an alternative key can be specified as a string:
-
-
-
-
or as a function:
-
-
-
-
data can also itself be a function that returns a results object:
-
-
-
+
+
+
Loading Array Data
+
Select2 provides some shortcuts that make it easy to access local data stored in an array instead of having to write a query function mentioned in the example above.
+
Example below inlines the data by specifying an array in the data element. Items in such an array must have id and text keys.
+
+
+
+
If your data does not have a text key, an alternative key can be specified as a string:
+
+
+
+
or as a function:
+
+
+
+
data can also itself be a function that returns a results object:
+
+
+
-
-
-
Example Code
+
+
+
Example Code
-
-
+
+
-
-
-
Loading Remote Data
-
Select2 comes with AJAX/JSONP support built in. In this example we will search for a movie using Rotten Tomatoes API:
-
-
-
-
If this example does not work it is probably because the Rotten Tomatoes API key usage of 10000 requests per day has been exhausted. Please try again tomorrow.
-
Example Code
-
-
Select2 uses jQuery's $.ajax function to execute the remote call by default. An alternative transport function can be specified in the ajax settings, or an entirely custom implementation can be built by providing a custom query function instead of using the ajax helper.
-
-
-
-
-
Infinite Scroll with Remote Data
-
Select2 supports lazy-appending of results when the result list is scrolled to the end.
- In order to enable the remote service must support some sort of a paging mechanism and
- the query function given to Select2 must take advantage of it. The following example demonstrates
- how this can be set up. Search for some keyword and then scroll the result list to the end to
- see more results load:
-
-
-
-
If this example does not work it is probably because the Rotten Tomatoes API key usage of 10000 requests per day has been exhausted. Please try again tomorrow.
-
Example Code
-
-
-
+
+
+
Loading Remote Data
+
Select2 comes with AJAX/JSONP support built in. In this example we will search for a movie using Rotten Tomatoes API:
+
+
+
+
If this example does not work it is probably because the Rotten Tomatoes API key usage of 10000 requests per day has been exhausted. Please try again tomorrow.
+
Example Code
+
+
Select2 uses jQuery's $.ajax function to execute the remote call by default. An alternative transport function can be specified in the ajax settings, or an entirely custom implementation can be built by providing a custom query function instead of using the ajax helper.
+
+
+
+
+
Infinite Scroll with Remote Data
+
Select2 supports lazy-appending of results when the result list is scrolled to the end.
+ In order to enable the remote service must support some sort of a paging mechanism and
+ the query function given to Select2 must take advantage of it. The following example demonstrates
+ how this can be set up. Search for some keyword and then scroll the result list to the end to
+ see more results load:
+
+
+
+
If this example does not work it is probably because the Rotten Tomatoes API key usage of 10000 requests per day has been exhausted. Please try again tomorrow.
+
Example Code
+
+
+
-
-
-
-
Programmatic Access
-
Select2 supports methods that allow programmatic control of the component:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Example Code
-
-
-
+
+
+
+
Programmatic Access
+
Select2 supports methods that allow programmatic control of the component:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example Code
+
+
+
-
-
-
-
Events
+
+
+
+
Events
-
change event is triggered on the original element whenever its value is changed by
- the user
-
open event is triggered on the original element whenever the dropdown needs to be opened:
+
change event is triggered on the original element whenever its value is changed by
+ the user
+
open event is triggered on the original element whenever the dropdown needs to be opened:
-
-
+
+
-
-
-
Event Log
-
-
Example Code
+
+
+
Event Log
+
+
Example Code
-
-
-
-
-
-
Tagging Support
+
+
+
+
+
+
Tagging Support
-
Select2 can be used to quickly set up fields used for tagging.
+
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 tags or create a new tag by
- picking the first choice which is what the user has typed into the search box so far.
-
-
-
Example Code
+
+
Note that when tagging is enabled the user can select from pre-existing tags or create a new tag by
+ picking the first choice which is what the user has typed into the search box so far.
+
+
+
Example Code
-
-
-
-
-
-
Maximum Input Length
+
+
+
+
+
+
Maximum Input Length
-
Select2 can be set a limit on the number of characters that can be entered per tag.
+
Select2 can be set a limit on the number of characters that can be entered per tag.
-
-
You would not be able to enter any input of more than 10 characters long.
-
-
-
Example Code
+
+
You would not be able to enter any input of more than 10 characters long.
+
+
+
Example Code
-
-
-
-
-
-
Auto Tokenization
+
+
+
+
+
+
Auto Tokenization
-
Select2 supports ability to add choices automatically as the user is typing into the search field.
- This is especially convenient in the tagging usecase where the user can quickly enter a number of tags
- by separating them with a comma or a space. Try typing in the search field below and entering a space or a comma.
+
Select2 supports ability to add choices automatically as the user is typing into the search field.
+ This is especially convenient in the tagging usecase where the user can quickly enter a number of tags
+ by separating them with a comma or a space. Try typing in the search field below and entering a space or a comma.
-
-
Note that the separators are defined in the tokenSeparators option.
-
Note that this example uses the built in tokenizer function, but a custom one can be provided in the options.
-
-
-
Example Code
+
+
Note that the separators are defined in the tokenSeparators option.
+
Note that this example uses the built in tokenizer function, but a custom one can be provided in the options.
+
+
+
Example Code
-
-
-
-
-
-
Reacting to external value changes
+
+
+
+
+
+
Reacting to external value changes
-
Select2 can react to external value changes and keep its selection in-sync. This feature allows
- Select2 to work seamlessly with front-end frameworks that use data binding between ui components
- and model values.
-
-
-
This feature is only available when initSelection() function is provided in
- the options. This function is needed to map the choice ids set on the element to objects used by
- Select2. This function is set by default when Select2 is attached to a select or when
- the tags helper function is used.
-
-
-
Example Code
+
Select2 can react to external value changes and keep its selection in-sync. This feature allows
+ Select2 to work seamlessly with front-end frameworks that use data binding between ui components
+ and model values.
+
+
+
This feature is only available when initSelection() function is provided in
+ the options. This function is needed to map the choice ids set on the element to objects used by
+ Select2. This function is set by default when Select2 is attached to a select or when
+ the tags helper function is used.
+
+
+
Example Code
-
-
+
+
-
-
-
-
Select2 Lifecycle
+
+
+
+
Select2 Lifecycle
-
+
-
-
-
-
-
-
Example Code
+
+
+
+
+
+
Example Code
-
-
+
+
-
-
-
-
Select2 Drag and Drop Sorting
-
- Select2 supports drag and drop sorting of selected choices. Select2 does not, itself, provide the necessary code to perform dragging and dropping, instead it provides hooks that other libraries can use to provide the behavior. In this example we are using JQuery UI's sortable() plugin.
-
-
The sorting is only available when Select2 is attached to a hidden input field.
+ Select2 supports drag and drop sorting of selected choices. Select2 does not, itself, provide the necessary code to perform dragging and dropping, instead it provides hooks that other libraries can use to provide the behavior. In this example we are using JQuery UI's sortable() plugin.
+
+
The sorting is only available when Select2 is attached to a hidden input field.
+
+
+
+
+
Example Code
-
-
+
+
-
-
-
-
Select2 Disabled Mode
-
-
-
-
-
-
-
Example Code
+ });
+
+
+
Select2 Disabled Mode
+
+
+
+
+
+
+
Example Code
-
-
+
+
-
-
-
-
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:
-
-
The dropdown below matches on custom attributes of the option tag. For example, the `blue` option can be matched by entering either `blue` or `cyan`:
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:
+
+
The dropdown below matches on custom attributes of the option tag. For example, the `blue` option can be matched by entering either `blue` or `cyan`:
+
+
+
+
Example Code
-
-
+
+
-
-
-
-
Sorting Displayed Results
-
Unlike other dropdowns on this page, this one filters results by query string normally, but returns the matched results sorted from shortest to longest by string length. Try typing 'e' and seeing how the results are sorted. This function is useful for sorting results by relevance to a user's query.
-
-
-
-
-
-
Example Code
+ }
+ return results;
+ }
+});
+});
+
+
+
Sorting Displayed Results
+
Unlike other dropdowns on this page, this one filters results by query string normally, but returns the matched results sorted from shortest to longest by string length. Try typing 'e' and seeing how the results are sorted. This function is useful for sorting results by relevance to a user's query.
+
+
+
+
+
+
Example Code
-
-
+
+
-
-
-
-
Responsive Design - Percent Width
-
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.
-
-
-
Example Code
+
+
+
+
Responsive Design - Percent Width
+
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.
+
+
+
Example Code
-
-
+
+
-
-
-
-
Lock selections
-
- In the event that you need to lock certain selections so that they can't be removed by the select2 interface, you can now pass in locked: true with your data. Please note: This also works for incoming values from ajax.
-
+ In the event that you need to lock certain selections so that they can't be removed by the select2 interface, you can now pass in locked: true with your data. Please note: This also works for incoming values from ajax.
+
+
+
+
+
+
+
Example Code
-
-
+
+
-
-
-
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:
-
-
-
-
-
-
+
+
+
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:
+
+
+
+
+
+
-
+
-
-
-
+
+
+
-
+
-
-
Documentation
-
+
+
Documentation
+
-
-
Constructor
-
-
-
-
Parameter
Type
Description
-
-
width
string
- Controls the width style attribute of the Select2 container div. The following values are supported:
-
-
off
No width attribute will be set. Keep in mind that the container div copies classes from the source element so setting the width attribute may not always be necessary.
-
element
Uses javascript to calculate the width of the source element.
-
copy
Copies the value of the width style attribute set on the source element.
-
resolve
First attempts to copy than falls back on element.
-
other values
if the width attribute contains a function it will be avaluated, otherwise the value is used verbatim.
-
-
-
minimumInputLength
int
Number of characters necessary to start a search.
-
maximumInputLength
int
Maximum number of characters that can be entered for an input.
-
minimumResultsForSearch
int
-
- The minimum number of results that must be initially (after opening the dropdown for the first time)
- populated in order to keep the search field. This
- is useful for cases where local data is used with just a few results, in which case the search box
- is not very useful and wastes screen space.
-
-
The option can be set to a negative value to permanently hide the search field.
-
Only applies to single-value select boxes
-
-
-
maximumSelectionSize
int/function
-
- The maximum number of items that can be selected in a multi-select control. If this number is less than 1 selection is not limited.
-
-
Once the number of selected items reaches the maximum specified the contents of the dropdown will be populated
- by the formatSelectionTooBig function.
-
-
-
placeholder
string
-
Initial value that is selected if no other selection is made.
-
The placeholder can also be specified as a data-placeholder attribute on the select
- or input element that Select2 is attached to.
-
+
+
Constructor
+
+
+
+
Parameter
Type
Description
+
+
width
string
+ Controls the width style attribute of the Select2 container div. The following values are supported:
+
+
off
No width attribute will be set. Keep in mind that the container div copies classes from the source element so setting the width attribute may not always be necessary.
+
element
Uses javascript to calculate the width of the source element.
+
copy
Copies the value of the width style attribute set on the source element.
+
resolve
First attempts to copy than falls back on element.
+
other values
if the width attribute contains a function it will be avaluated, otherwise the value is used verbatim.
+
+
+
minimumInputLength
int
Number of characters necessary to start a search.
+
maximumInputLength
int
Maximum number of characters that can be entered for an input.
+
minimumResultsForSearch
int
+
+ The minimum number of results that must be initially (after opening the dropdown for the first time)
+ populated in order to keep the search field. This
+ is useful for cases where local data is used with just a few results, in which case the search box
+ is not very useful and wastes screen space.
+
+
The option can be set to a negative value to permanently hide the search field.
+
Only applies to single-value select boxes
+
+
+
maximumSelectionSize
int/function
+
+ The maximum number of items that can be selected in a multi-select control. If this number is less than 1 selection is not limited.
+
+
Once the number of selected items reaches the maximum specified the contents of the dropdown will be populated
+ by the formatSelectionTooBig function.
+
+
+
placeholder
string
+
Initial value that is selected if no other selection is made.
+
The placeholder can also be specified as a data-placeholder attribute on the select
+ or input element that Select2 is attached to.
+
-
Note that because browsers assume the first option element
- is selected in non-multi-value select boxes an empty first option element must be provided (<option></option>)
- for the placeholder to work.
-
-
-
placeholderOption
function/string
-
When attached to a select resolves the option that should be used as the placeholder.
- Can either be a function which given the select element should return the option
- element or a string first to indicate that the first option should be used.
-
This option is useful when Select2's default of using the first option only if it has no value and no text is not suitable.
-
-
separator
string
-
- Separator character or string used to delimit ids in value attribute of the multi-valued selects.
- The default delimiter is the , character.
-
-
-
-
allowClear
-
boolean
-
-
- Whether or not a clear button is displayed when the select box has a selection. The
- button,
- when clicked, resets the value of the select box back to the placeholder, thus this option is
- only
- available when the placeholder is specified.
-
-
This option only works when the placeholder is specified.
-
When attached to a select an option with an empty value must be provided.
- This is the option that will be selected when the button is pressed since a select box requires
- at least one selection option.
-
- Also, note that this option only works with
- non-multi-value based selects because multi-value selects always provide such a button for every
- selected option.
-
-
-
-
-
multiple
-
boolean
-
-
- Whether or not Select2 allows selection of multiple values.
-
-
When Select2 is attached to a select element this value will be ignored and select's
- multiple attribute will be used instead.
-
-
-
-
-
closeOnSelect
-
boolean
-
-
- If set to false the dropdown is not closed after a selection is made, allowing for rapid selection of multiple items. By default this option is set to true.
-
+
Note that because browsers assume the first option element
+ is selected in non-multi-value select boxes an empty first option element must be provided (<option></option>)
+ for the placeholder to work.
+
+
+
placeholderOption
function/string
+
When attached to a select resolves the option that should be used as the placeholder.
+ Can either be a function which given the select element should return the option
+ element or a string first to indicate that the first option should be used.
+
This option is useful when Select2's default of using the first option only if it has no value and no text is not suitable.
+
+
separator
string
+
+ Separator character or string used to delimit ids in value attribute of the multi-valued selects.
+ The default delimiter is the , character.
+
+
+
+
allowClear
+
boolean
+
+
+ Whether or not a clear button is displayed when the select box has a selection. The
+ button,
+ when clicked, resets the value of the select box back to the placeholder, thus this option is
+ only
+ available when the placeholder is specified.
+
+
This option only works when the placeholder is specified.
+
When attached to a select an option with an empty value must be provided.
+ This is the option that will be selected when the button is pressed since a select box requires
+ at least one selection option.
+
+ Also, note that this option only works with
+ non-multi-value based selects because multi-value selects always provide such a button for every
+ selected option.
+
+
+
+
+
multiple
+
boolean
+
+
+ Whether or not Select2 allows selection of multiple values.
+
+
When Select2 is attached to a select element this value will be ignored and select's
+ multiple attribute will be used instead.
+
+
+
+
+
closeOnSelect
+
boolean
+
+
+ If set to false the dropdown is not closed after a selection is made, allowing for rapid selection of multiple items. By default this option is set to true.
+
-
- Only applies when configured in multi-select mode.
-
-
-
-
-
openOnEnter
-
boolean
-
-
- If set to true the dropdown is opened when the user presses the enter key and Select2 is closed. By default this option is enabled.
-
-
-
-
id
function
- Function used to get the id from the choice object or a string representing the key under which the id is stored.
-
id(object)
-
-
Parameter
Type
Description
-
object
object
A choice object.
-
<returns>
string
the id of the object.
-
- The default implementation expects the object to have a id property that is returned.
-
-
matcher
function
- Used to determine whether or not the search term matches an option when a built-in query function is used.
- The built in query function is used when Select2 is attached to a select, or the local or tags helpers are used.
-
matcher(term, text, option)
-
-
Parameter
Type
Description
-
term
string
search term.
-
text
string
text of the option being matched.
-
option
jquery object
-
the option element we are trying to match. Only given when attached to select.
- Can be used to match against custom attributes on the option tag in addition to matching on the option's text.
-
<returns>
boolean
true if search term matches the text, or false otherwise.
-
- The default implementation is case insensitive and matches anywhere in the term:
- function(term, text) { return text.toUpperCase().indexOf(term.toUpperCase())>=0; }
-
-
sortResults
function
- Used to sort the results list for searching right before display. Useful for sorting matches by relevance to the user's search term.
-
sortResults(results, container, query)
-
-
object
object
One of the result objects returned from the query function
.
-
container
jQuery object
jQuery wrapper of the node that should contain the representation of the result.
-
query
object
The query object used to request this set of results.
-
<returns>
object
A results object.
-
- Defaults to no sorting:
- function(results, container, query) { return results; }
-
-
formatSelection
function
- Function used to render the current selection.
-
formatSelection(object, container)
-
-
Parameter
Type
Description
-
object
object
The selected result object returned from the query function.
-
container
jQuery object
jQuery wrapper of the node to which the selection should be appended.
-
escapeMarkup
function
Function that can be used to escape html markup. This is the function defined in the escapeMarkupoption, or the default.
-
<returns>
string (optional)
Html string, a DOM element, or a jQuery object that renders the selection.
-
-
The default implementation expects the object to have a text property that is returned.
-
The implementation may choose to append elements directly to the provided container object, or return a single value and have it automatically appended.
-
-
- When attached to a select the original <option> (or <optgroup>) element is accessible inside the specified function through the property item.element:
+
+ Only applies when configured in multi-select mode.
+
+
+
+
+
openOnEnter
+
boolean
+
+
+ If set to true the dropdown is opened when the user presses the enter key and Select2 is closed. By default this option is enabled.
+
+
+
+
id
function
+ Function used to get the id from the choice object or a string representing the key under which the id is stored.
+
id(object)
+
+
Parameter
Type
Description
+
object
object
A choice object.
+
<returns>
string
the id of the object.
+
+ The default implementation expects the object to have a id property that is returned.
+
+
matcher
function
+ Used to determine whether or not the search term matches an option when a built-in query function is used.
+ The built in query function is used when Select2 is attached to a select, or the local or tags helpers are used.
+
matcher(term, text, option)
+
+
Parameter
Type
Description
+
term
string
search term.
+
text
string
text of the option being matched.
+
option
jquery object
+
the option element we are trying to match. Only given when attached to select.
+ Can be used to match against custom attributes on the option tag in addition to matching on the option's text.
+
<returns>
boolean
true if search term matches the text, or false otherwise.
+
+ The default implementation is case insensitive and matches anywhere in the term:
+ function(term, text) { return text.toUpperCase().indexOf(term.toUpperCase())>=0; }
+
+
sortResults
function
+ Used to sort the results list for searching right before display. Useful for sorting matches by relevance to the user's search term.
+
sortResults(results, container, query)
+
+
object
object
One of the result objects returned from the query function
.
+
container
jQuery object
jQuery wrapper of the node that should contain the representation of the result.
+
query
object
The query object used to request this set of results.
+
<returns>
object
A results object.
+
+ Defaults to no sorting:
+ function(results, container, query) { return results; }
+
+
formatSelection
function
+ Function used to render the current selection.
+
formatSelection(object, container)
+
+
Parameter
Type
Description
+
object
object
The selected result object returned from the query function.
+
container
jQuery object
jQuery wrapper of the node to which the selection should be appended.
+
escapeMarkup
function
Function that can be used to escape html markup. This is the function defined in the escapeMarkupoption, or the default.
+
<returns>
string (optional)
Html string, a DOM element, or a jQuery object that renders the selection.
+
+
The default implementation expects the object to have a text property that is returned.
+
The implementation may choose to append elements directly to the provided container object, or return a single value and have it automatically appended.
+
+
+ When attached to a select the original <option> (or <optgroup>) element is accessible inside the specified function through the property item.element:
format(item) {
var originalOption = item.element;
return item.text
}
-
-
-
formatResult
function
- Function used to render a result that the user can select.
-
formatResult(object, container, query)
-
-
Parameter
Type
Description
-
object
object
One of the result objects returned from the query function.
-
container
jQuery object
jQuery wrapper of the node that should contain the representation of the result.
-
query
object
The query object used to request this set of results.
-
escapeMarkup
function
Function used to escape markup in results. If you do not expect to render custom markup you should pass your text through this function to escape any markup that may have been accidentally returned. This function is configurable in options of select2.
-
<returns>
string (optional)
Html string, a DOM element, or a jQuery object that represents the result.
-
-
The default implementation expects the object to have a text property that is returned.
-
The implementation may choose to append elements directly to the provided container object, or return a single value and have it automatically appended.
-
-
- When attached to a select the original <option> (or <optgroup>) element is accessible inside the specified function through the property item.element:
+
+
+
formatResult
function
+ Function used to render a result that the user can select.
+
formatResult(object, container, query)
+
+
Parameter
Type
Description
+
object
object
One of the result objects returned from the query function.
+
container
jQuery object
jQuery wrapper of the node that should contain the representation of the result.
+
query
object
The query object used to request this set of results.
+
escapeMarkup
function
Function used to escape markup in results. If you do not expect to render custom markup you should pass your text through this function to escape any markup that may have been accidentally returned. This function is configurable in options of select2.
+
<returns>
string (optional)
Html string, a DOM element, or a jQuery object that represents the result.
+
+
The default implementation expects the object to have a text property that is returned.
+
The implementation may choose to append elements directly to the provided container object, or return a single value and have it automatically appended.
+
+
+ When attached to a select the original <option> (or <optgroup>) element is accessible inside the specified function through the property item.element:
format(item) {
var originalOption = item.element;
return item.text
}
-
-
-
formatResultCssClass
function
- Function used to add css classes to result elements.
-
formatResultCssClass(object)
-
-
Parameter
Type
Description
-
object
object
One of the result objects returned from the query function.
-
<returns>
string (optional)
String containing css class names separated by a space.
-
-
By default when attached to a select css classes from options will be automatically copied.
-
-
formatNoMatches
function
- Function used to render the "No matches" message
-
formatNoMatches(term)
-
-
Parameter
Type
Description
-
term
string
Search string entered by user.
-
<returns>
string
Message html.
-
-
-
formatSearching
function
- Function used to render the "Searching..." message that is displayed while
- search is in progress.
-
formatSearching()
-
-
Parameter
Type
Description
-
<returns>
string
Message html or null/undefined to disable the message.
-
-
-
formatInputTooShort
function
- Function used to render the "Search input too short" message.
-
formatInputTooShort(term, minLength)
-
-
Parameter
Type
Description
-
term
string
Search string entered by user.
-
minLength
int
Minimum required term length.
-
<returns>
string
Message html.
-
-
-
formatSelectionTooBig
function
- Function used to render the "You cannot select any more choices" message.
-
formatSelectionTooBig(maxSize)
-
-
Parameter
Type
Description
-
maxSize
string
The maximum specified size of the selection.
-
<returns>
string
Message html.
-
-
-
createSearchChoice
function
- Creates a new selectable choice from user's search term. Allows creation of choices not available via the query
- function. Useful when the user can create choices on the fly, eg for the 'tagging' usecase.
-
createSearchChoice(term)
-
-
Parameter
Type
Description
-
term
string
Search string entered by user.
-
<returns>
object (optional)
Object representing the new choice.
- Must at least contain an id attribute.
-
- If the function returns undefined or null no choice will be created. If a new
- choice is created it is displayed first in the selection list so that user may select it by simply pressing
- enter.
+
+
+
formatResultCssClass
function
+ Function used to add css classes to result elements.
+
formatResultCssClass(object)
+
+
Parameter
Type
Description
+
object
object
One of the result objects returned from the query function.
+
<returns>
string (optional)
String containing css class names separated by a space.
+
+
By default when attached to a select css classes from options will be automatically copied.
+
+
formatNoMatches
function
+ Function used to render the "No matches" message
+
formatNoMatches(term)
+
+
Parameter
Type
Description
+
term
string
Search string entered by user.
+
<returns>
string
Message html.
+
+
+
formatSearching
function
+ Function used to render the "Searching..." message that is displayed while
+ search is in progress.
+
formatSearching()
+
+
Parameter
Type
Description
+
<returns>
string
Message html or null/undefined to disable the message.
+
+
+
formatInputTooShort
function
+ Function used to render the "Search input too short" message.
+
formatInputTooShort(term, minLength)
+
+
Parameter
Type
Description
+
term
string
Search string entered by user.
+
minLength
int
Minimum required term length.
+
<returns>
string
Message html.
+
+
+
formatSelectionTooBig
function
+ Function used to render the "You cannot select any more choices" message.
+
formatSelectionTooBig(maxSize)
+
+
Parameter
Type
Description
+
maxSize
string
The maximum specified size of the selection.
+
<returns>
string
Message html.
+
+
+
createSearchChoice
function
+ Creates a new selectable choice from user's search term. Allows creation of choices not available via the query
+ function. Useful when the user can create choices on the fly, eg for the 'tagging' usecase.
+
createSearchChoice(term)
+
+
Parameter
Type
Description
+
term
string
Search string entered by user.
+
<returns>
object (optional)
Object representing the new choice.
+ Must at least contain an id attribute.
+
+ If the function returns undefined or null no choice will be created. If a new
+ choice is created it is displayed first in the selection list so that user may select it by simply pressing
+ enter.
-
When used in combination with input[type=hidden] tag care
- must be taken to sanitize the id attribute of the choice object, especially stripping
- , as it is used as a value separator.
-
-
initSelection
function
- Called when Select2 is created to allow the user to initialize the selection based on the value of the
- element select2 is attached to.
-
- Essentially this is an id->object mapping function.
-
-
initSelection(element, callback)
-
-
Parameter
Type
Description
-
element
jQuery array
element Select2 is attached to.
-
callback
function
callback function that should be called with the data which is either an object in case of a single select or an array of objects in case of multi-select.
-
-
This function will only be called when there is initial input to be processed.
- Here is an example implementation used for tags. Tags are the simplest form of data where the id is also
- the text:
+
When used in combination with input[type=hidden] tag care
+ must be taken to sanitize the id attribute of the choice object, especially stripping
+ , as it is used as a value separator.
+
+
initSelection
function
+ Called when Select2 is created to allow the user to initialize the selection based on the value of the
+ element select2 is attached to.
+
+ Essentially this is an id->object mapping function.
+
+
initSelection(element, callback)
+
+
Parameter
Type
Description
+
element
jQuery array
element Select2 is attached to.
+
callback
function
callback function that should be called with the data which is either an object in case of a single select or an array of objects in case of multi-select.
+
+
This function will only be called when there is initial input to be processed.
+ Here is an example implementation used for tags. Tags are the simplest form of data where the id is also
+ the text:
- A tokenizer function can process the input typed into the search field after every keystroke and extract
- and select choices. This is useful, for example, in tagging scenarios where the user can create tags quickly
- by separating them with a comma or a space instead of pressing enter.
-
Tokenizer only applies to multi-selects.
-
tokenizer(input, selection, selectCallback, opts)
-
-
Parameter
Type
Description
-
input
string
The text entered into the search field so far.
-
selection
array
Array of objects representing the current selection.
- Useful if tokenizer needs to filter out duplicates.
-
selectCallback
function
Callback that can be used to add objects to the selection.
-
opts
object
Options with which Select2 was initialized. Useful if tokenizer needs to access some properties in the options.
-
<returns>
string (optional)
Returns the string to which the input of
- the search field should be set to. Usually this is the remainder, of any, of the string after
- the tokens have been stripped. If undefined or null is returned the
- input of the search field is unchanged.
-
+
+
tokenizer
function
+ A tokenizer function can process the input typed into the search field after every keystroke and extract
+ and select choices. This is useful, for example, in tagging scenarios where the user can create tags quickly
+ by separating them with a comma or a space instead of pressing enter.
+
Tokenizer only applies to multi-selects.
+
tokenizer(input, selection, selectCallback, opts)
+
+
Parameter
Type
Description
+
input
string
The text entered into the search field so far.
+
selection
array
Array of objects representing the current selection.
+ Useful if tokenizer needs to filter out duplicates.
+
selectCallback
function
Callback that can be used to add objects to the selection.
+
opts
object
Options with which Select2 was initialized. Useful if tokenizer needs to access some properties in the options.
+
<returns>
string (optional)
Returns the string to which the input of
+ the search field should be set to. Usually this is the remainder, of any, of the string after
+ the tokens have been stripped. If undefined or null is returned the
+ input of the search field is unchanged.
+
- The default tokenizer will only be used if the tokenSeparators and createSearchChoice
- options are specified. The default tokenizer will split the string using any separator in tokenSeparators
- and will create and select choice objects using createSearhChoice option. It will also
- ignore duplicates, silently swallowing those tokens.
-
-
tokenSeparators
array
- An array of strings that define token separators for the default tokenizer
- function. By default, this option is set to an empty array which means tokenization using the default
- tokenizer is disabled. Usually it is sensible to set this option to a value similar to [',', ' '].
-
+ The default tokenizer will only be used if the tokenSeparators and createSearchChoice
+ options are specified. The default tokenizer will split the string using any separator in tokenSeparators
+ and will create and select choice objects using createSearhChoice option. It will also
+ ignore duplicates, silently swallowing those tokens.
+
+
tokenSeparators
array
+ An array of strings that define token separators for the default tokenizer
+ function. By default, this option is set to an empty array which means tokenization using the default
+ tokenizer is disabled. Usually it is sensible to set this option to a value similar to [',', ' '].
+
-
-
query
-
function
-
- Function used to query results for the search term.
-
query(options)
-
-
Parameter
Type
Description
-
options.element
jquery object
The element Select2 is attached to.
-
options.term
string
Search string entered by user.
-
options.page
int
1-based page number tracked by Select2 for use with infinite scrolling of results.
-
options.context
object
An object that persists across the lifecycle of queries for the same search term (the query to retrieve the initial results, and subsequent queries to retrieve more result pages for the same search term). When this function is first called for a new search term this object will be null. The user may choose to set any object in the results.context field - this object will then be used as the context parameter for all calls to the query method that will load more search results for the initial search term. The object will be reset back to null when a new search term is queried. This feature is useful when a page number is not easily mapped against the server side paging mechanism. For example, some server side paging mechanism may return a "continuation token" that needs to be passed back to them in order to retrieve the next page of search results.
-
options.callback
function
-
Callback function that should be called with the result object. The result object:
+
+
query
+
function
+
+ Function used to query results for the search term.
+
query(options)
Parameter
Type
Description
-
result.results
[object]
Array of result objects. The default renderers expect objects with id and text keys. The id attribute is required, even if custom renderers are used. The object may also contain a childrenkey if hierarchical data is displayed.
-
result.more
boolean
trueif more results are available for the current search term.
-
results.context
object
A user-defined object that should be made available as the context parameter to the query function on subsequent queries to load more result pages for the same search term. See the description of options.context parameter.
+
options.element
jquery object
The element Select2 is attached to.
+
options.term
string
Search string entered by user.
+
options.page
int
1-based page number tracked by Select2 for use with infinite scrolling of results.
+
options.context
object
An object that persists across the lifecycle of queries for the same search term (the query to retrieve the initial results, and subsequent queries to retrieve more result pages for the same search term). When this function is first called for a new search term this object will be null. The user may choose to set any object in the results.context field - this object will then be used as the context parameter for all calls to the query method that will load more search results for the initial search term. The object will be reset back to null when a new search term is queried. This feature is useful when a page number is not easily mapped against the server side paging mechanism. For example, some server side paging mechanism may return a "continuation token" that needs to be passed back to them in order to retrieve the next page of search results.
+
options.callback
function
+
Callback function that should be called with the result object. The result object:
+
+
Parameter
Type
Description
+
result.results
[object]
Array of result objects. The default renderers expect objects with id and text keys. The id attribute is required, even if custom renderers are used. The object may also contain a childrenkey if hierarchical data is displayed.
+
result.more
boolean
trueif more results are available for the current search term.
+
results.context
object
A user-defined object that should be made available as the context parameter to the query function on subsequent queries to load more result pages for the same search term. See the description of options.context parameter.
+
+
-
-
-
In order for this function to work Select2 should be attached to a input type='hidden' tag instead of a select.
-
-
Example Data
+
In order for this function to work Select2 should be attached to a input type='hidden' tag instead of a select.
- Options for the built in ajax query function. This object acts as a shortcut for having to manually write a function that performs ajax requests. The built-in function supports more advanced features such as throttling and dropping out-of-order responses.
+
+
+
+
ajax
object
+ Options for the built in ajax query function. This object acts as a shortcut for having to manually write a function that performs ajax requests. The built-in function supports more advanced features such as throttling and dropping out-of-order responses.
-
-
Parameter
Type
Description
-
transport
function
Function that will be used to perform the ajax request. Must be parameter-compatible with $.ajax. Defaults to $.ajax if not specified.
- Allows the use of various ajax wrapper libraries such as: AjaxManager.
-
url
string/function
String containing the ajax url or a function that returns such a string.
-
dataType
string
Data type for the request. xml, json, jsonp, other formats supported by jquery.
-
quietMillis
int
Number of milliseconds to wait for the user to stop typing before issuing the ajax request.
-
cache
boolean
If set to false, it will force requested pages not to be cached by the browser. Default is false.
-
jsonpCallback
string/function
The callback function name for a JSONP request. This value will be used instead of the random name automatically generated by jQuery. It is preferable to let jQuery generate a unique name as it'll make it easier to manage the requests and provide callbacks and error handling. You may want to specify the callback when you want to enable better browser caching of GET requests.
-
data
function
- Function to generate query parameters for the ajax request.
-
data(term, page)
-
-
Parameter
Type
Description
-
term
string
Search term.
-
page
int
1-based page number tracked by Select2 for use with infinite scrolling of results.
Results object. See "options.callback" in the "query" function for format.
-
-
-
params
object/function
An object or a function that returns an object that contains extra parameters that will be passed to the transport. For example it can be used to set the content type: {contentType: "application/json;charset=utf-8"}
+
+
Parameter
Type
Description
+
transport
function
Function that will be used to perform the ajax request. Must be parameter-compatible with $.ajax. Defaults to $.ajax if not specified.
+ Allows the use of various ajax wrapper libraries such as: AjaxManager.
+
url
string/function
String containing the ajax url or a function that returns such a string.
+
dataType
string
Data type for the request. xml, json, jsonp, other formats supported by jquery.
+
quietMillis
int
Number of milliseconds to wait for the user to stop typing before issuing the ajax request.
+
cache
boolean
If set to false, it will force requested pages not to be cached by the browser. Default is false.
+
jsonpCallback
string/function
The callback function name for a JSONP request. This value will be used instead of the random name automatically generated by jQuery. It is preferable to let jQuery generate a unique name as it'll make it easier to manage the requests and provide callbacks and error handling. You may want to specify the callback when you want to enable better browser caching of GET requests.
+
data
function
+ Function to generate query parameters for the ajax request.
+
data(term, page)
+
+
Parameter
Type
Description
+
term
string
Search term.
+
page
int
1-based page number tracked by Select2 for use with infinite scrolling of results.
Results object. See "options.callback" in the "query" function for format.
+
+
+
params
object/function
An object or a function that returns an object that contains extra parameters that will be passed to the transport. For example it can be used to set the content type: {contentType: "application/json;charset=utf-8"}
-
-
In order for this function to work Select2 should be attached to a input type='hidden' tag instead of a select.
-
For documentation of the data format see the query function.
-
-
data
array/object
- Options for the built in query function that works with arrays.
-
If this element contains an array, each element in the array must contain id and text keys.
-
Alternatively, this element can be specified as an object in which results key must contain the data as an array and a text key can either be the name of the key in data items that contains text or a function that retrieves the text given a data element from the array.
-
-
tags
array/function
- Puts Select2 into 'tagging'mode where the user can add new choices and pre-existing tags are provided via
- this options attribute which is either an array or a function that returns an
- array of objects or strings. If strings are used instead of objects
- they will be converted into an object that has an id and text attribute equal
- to the value of the string.
-
-
containerCss
function/object
- Inline css that will be added to select2's container. Either an object containing css property/value key pairs or a function that returns such an object.
-
-
containerCssClass
function/string
- Css class that will be added to select2's container tag.
-
-
dropdownCss
function/object
- Inline css that will be added to select2's dropdown container. Either an object containing css property/value key pairs or a function that returns such an object.
-
-
dropdownCssClass
function/string
- Css class that will be added to select2's dropdown container.
-
-
dropdownAutoWidth
boolean
- When set to true attempts to automatically size the width of the dropdown based on content inside.
-
-
adaptContainerCssClass
function
- Function that filters/renames css classes as they are copied from the source tag to the select2 container tag.
-
adaptContainerCssClass(clazz)
-
-
Parameter
Type
Description
-
clazz
string
Css class being copied.
-
<returns>
string
Css class to be applied or null/undefined/'' to not apply it.
-
- The default implementation applies all classes without modification.
-
-
adaptDropdownCssClass
function
- Function that filters/renames css classes as they are copied from the source tag to the select2 dropdown tag.
-
adaptDropdownCssClass(clazz)
-
-
Parameter
Type
Description
-
clazz
string
Css class being copied.
-
<returns>
string
Css class to be applied or null/undefined/'' to not apply it.
-
- The default implementation always returns null thereby filtering out all classes.
-
-
escapeMarkup
function
- String escapeMarkup(String markup)
-
Function used to post-process markup returned from formatter functions. By default this function escapes html entities to prevent javascript injection.
-
-
selectOnBlur
boolean
-
Set to true if you want Select2 to select the currently highlighted option when it is blurred.
-
-
loadMorePadding
integer
- Defines how many pixels need to be below the fold before the next page is loaded. The default value is 0 which means the result list needs to be scrolled all the way to the bottom for the next page of results to be loaded. This option can be used to trigger the load sooner, possibly resulting in a smoother user experience.
-
-
nextSearchTerm
function
-
Function used to determine what the next search term should be.
-
-
-
Parameter
Type
Description
-
data
object
Retrieved data.
-
this.search.val()
string
Search term that yielded the current result set.
-
-
-
Here is an example implementation used to display the current search term when the dropdown is opened:
+
+
In order for this function to work Select2 should be attached to a input type='hidden' tag instead of a select.
+
For documentation of the data format see the query function.
+
+
data
array/object
+ Options for the built in query function that works with arrays.
+
If this element contains an array, each element in the array must contain id and text keys.
+
Alternatively, this element can be specified as an object in which results key must contain the data as an array and a text key can either be the name of the key in data items that contains text or a function that retrieves the text given a data element from the array.
+
+
tags
array/function
+ Puts Select2 into 'tagging'mode where the user can add new choices and pre-existing tags are provided via
+ this options attribute which is either an array or a function that returns an
+ array of objects or strings. If strings are used instead of objects
+ they will be converted into an object that has an id and text attribute equal
+ to the value of the string.
+
+
containerCss
function/object
+ Inline css that will be added to select2's container. Either an object containing css property/value key pairs or a function that returns such an object.
+
+
containerCssClass
function/string
+ Css class that will be added to select2's container tag.
+
+
dropdownCss
function/object
+ Inline css that will be added to select2's dropdown container. Either an object containing css property/value key pairs or a function that returns such an object.
+
+
dropdownCssClass
function/string
+ Css class that will be added to select2's dropdown container.
+
+
dropdownAutoWidth
boolean
+ When set to true attempts to automatically size the width of the dropdown based on content inside.
+
+
adaptContainerCssClass
function
+ Function that filters/renames css classes as they are copied from the source tag to the select2 container tag.
+
adaptContainerCssClass(clazz)
+
+
Parameter
Type
Description
+
clazz
string
Css class being copied.
+
<returns>
string
Css class to be applied or null/undefined/'' to not apply it.
+
+ The default implementation applies all classes without modification.
+
+
adaptDropdownCssClass
function
+ Function that filters/renames css classes as they are copied from the source tag to the select2 dropdown tag.
+
adaptDropdownCssClass(clazz)
+
+
Parameter
Type
Description
+
clazz
string
Css class being copied.
+
<returns>
string
Css class to be applied or null/undefined/'' to not apply it.
+
+ The default implementation always returns null thereby filtering out all classes.
+
+
escapeMarkup
function
+ String escapeMarkup(String markup)
+
Function used to post-process markup returned from formatter functions. By default this function escapes html entities to prevent javascript injection.
+
+
selectOnBlur
boolean
+
Set to true if you want Select2 to select the currently highlighted option when it is blurred.
+
+
loadMorePadding
integer
+ Defines how many pixels need to be below the fold before the next page is loaded. The default value is 0 which means the result list needs to be scrolled all the way to the bottom for the next page of results to be loaded. This option can be used to trigger the load sooner, possibly resulting in a smoother user experience.
+
+
nextSearchTerm
function
+
Function used to determine what the next search term should be.
+
+
+
Parameter
Type
Description
+
data
object
Retrieved data.
+
this.search.val()
string
Search term that yielded the current result set.
+
+
+
Here is an example implementation used to display the current search term when the dropdown is opened:
Only applies when the dropdown is configured in single-select mode.
-
-
-
-
-
val
-
-
Gets or sets the selection. If the value parameter is not specified, the id attribute of the currently selected element is returned. If the value parameter is specified it will become the current selection.
-
-
-
Parameter
Type
Description
-
-
value (optional)
object
-
-
-
-
Single-Valued
Multi-Valued
-
-
-
Attached to select
-
Value of the value attribute of the option that should be selected.
-
Array of the value attributes of the options that should be selected. null for empty.
-
-
-
Attached to input[type=hidden]
-
Id of the object that should be selected. "" to clear. Can only be used if initSelection() was specified.
-
An array of objects ids that should be selected. "" to clear. Can only be used if initSelection() was specified.
-
-
+
Only applies when the dropdown is configured in single-select mode.
+
-
-
triggerChange (optional)
boolean
Whether or not a change event should be triggered. false by default.
-
-
val method invoked on a single-select with an unset value will return "", while a val method invoked on an empty multi-select will return [].
-Example:
alert("Selected value is: "+$("#e8").select2("val")); $("#e8").select2("val", "CA");
-
Notice that in order to use this method you must define the initSelection function in the options so Select2 knows how to transform the id of the object you pass in val() to the full object it needs to render selection. If you are attaching to a select element this function is already provided for you.
+
+
val
+
+
Gets or sets the selection. If the value parameter is not specified, the id attribute of the currently selected element is returned. If the value parameter is specified it will become the current selection.
+
+
+
Parameter
Type
Description
+
+
value (optional)
object
-
-
data
-
-
Gets or sets the selection. Analogous to val method, but works with objects instead of ids.
-
data method invoked on a single-select with an unset value will return null, while a data method invoked on an empty multi-select will return [].
+
+
+
Single-Valued
Multi-Valued
+
+
+
Attached to select
+
Value of the value attribute of the option that should be selected.
+
Array of the value attributes of the options that should be selected. null for empty.
+
+
+
Attached to input[type=hidden]
+
Id of the object that should be selected. "" to clear. Can only be used if initSelection() was specified.
+
An array of objects ids that should be selected. "" to clear. Can only be used if initSelection() was specified.
+
+
+
+
+
triggerChange (optional)
boolean
Whether or not a change event should be triggered. false by default.
+
+
val method invoked on a single-select with an unset value will return "", while a val method invoked on an empty multi-select will return [].
+
+ Example:
alert("Selected value is: "+$("#e8").select2("val")); $("#e8").select2("val", "CA");
+
Notice that in order to use this method you must define the initSelection function in the options so Select2 knows how to transform the id of the object you pass in val() to the full object it needs to render selection. If you are attaching to a select element this function is already provided for you.
+
+
+
data
+
+
Gets or sets the selection. Analogous to val method, but works with objects instead of ids.
+
data method invoked on a single-select with an unset value will return null, while a data method invoked on an empty multi-select will return [].
-
-
destroy
-
-
Reverts changes to DOM done by Select2. Any selection done via Select2 will be preserved.
+
+
destroy
+
+
Reverts changes to DOM done by Select2. Any selection done via Select2 will be preserved.
-
-
open
-
-
Opens the dropdown.
-
-
close
-
-
Closes the dropdown.
-
-
enable(boolean)
-
-
Enables or disables Select2 and its underlying form component based on the boolean parameter.
-
-
readonly(boolean)
-
-
Toggles readonly mode on Select2 and its underlying form component based on the boolean parameter.
+
+
open
+
+
Opens the dropdown.
+
+
close
+
+
Closes the dropdown.
+
+
enable(boolean)
+
+
Enables or disables Select2 and its underlying form component based on the boolean parameter.
+
+
readonly(boolean)
+
+
Toggles readonly mode on Select2 and its underlying form component based on the boolean parameter.
-
+
container
-
-
Retrieves the main container element that wraps all of DOM added by Select2
- Example: console.log($("#tags").select2("container"));
-
-
onSortStart
-
-
Notifies Select2 that a drag and drop sorting operation has started. Select2 will hide all non-selection list items such as the search container, etc.
- Example: $("#tags").select2("onSortStart");
-
-
onSortEnd
-
-
Notifies Select2 that a drag and drop sorting operation has finished. Select2 will re-display any elements previously hidden and update the selection of the element it is attached to.
- Example: $("#tags").select2("onSortEnd");
-
+
+
Retrieves the main container element that wraps all of DOM added by Select2
+ Example: console.log($("#tags").select2("container"));
+
+
onSortStart
+
+
Notifies Select2 that a drag and drop sorting operation has started. Select2 will hide all non-selection list items such as the search container, etc.
+ Example: $("#tags").select2("onSortStart");
+
+
onSortEnd
+
+
Notifies Select2 that a drag and drop sorting operation has finished. Select2 will re-display any elements previously hidden and update the selection of the element it is attached to.
+ Example: $("#tags").select2("onSortEnd");
+
-
-
Events
-
+
+
Events
+
-
-
-
change
-
Fired when selection is changed.
-
The event object contains the following custom properties:
-
-
val
The current selection (taking into account the result of the change) - id or array of ids.
-
added
The added element, if any - the full element object, not just the id.
-
removed
The removed element, if any - the full element object, not just the id.
-
-
-
-
-
-
-
select2-opening
-
Fired before the dropdown is shown.
-
The event listener can prevent the opening by calling preventDefault() on the supplied event object.
-
-
-
-
-
-
select2-open
-
Fired after the dropdown is shown.
-
-
-
-
-
-
select2-highlight
-
Fired when a choice is highlighted in the dropdown.
-
-
The event object contains the following custom properties:
-
-
val
The id of the highlighted choice object.
-
object
The highlighted choice object.
-
-
-
-
-
-
-
select2-selecting
-
Fired when a choice is being selected in the dropdown, but before any modification has been made to the selection.
- This event is used to allow the user to reject selection by calling event.preventDefault()
-
-
The event object contains the following custom properties:
-
-
val
The id of the highlighted choice object.
-
object
The choice object about to be selected.
-
-
-
-
-
-
-
select2-clearing
-
Fired when a choice is being cleared in the dropdown, but before any modification has been made to the selection.
- This event is used to allow the user to reject the clear by calling event.preventDefault()
-
-
For the clear button to be visible the allowClear option needs to be true.
-
-
-
-
-
select2-removed
-
Fired when a choice is removed or cleared.
-
-
The event object contains the following custom properties:
-
-
val
The id of the highlighted choice object.
-
object
The highlighted choice object.
-
-
-
-
-
-
-
select2-loaded
-
Fired when query function is done loading the data and the results list has been updated
-
-
The event object contains the following custom properties:
-
-
items
data that was used to populate the results.
-
-
-
-
-
-
-
select2-focus
-
Fired when the control is focussed.
-
-
-
-
-
-
select2-blur
-
Fired when the control is blurred.
-
-
-
-
+
+
+
change
+
Fired when selection is changed.
+
The event object contains the following custom properties:
+
+
val
The current selection (taking into account the result of the change) - id or array of ids.
+
added
The added element, if any - the full element object, not just the id.
+
removed
The removed element, if any - the full element object, not just the id.
+
+
+
+
+
+
+
select2-opening
+
Fired before the dropdown is shown.
+
The event listener can prevent the opening by calling preventDefault() on the supplied event object.
+
+
+
+
+
+
select2-open
+
Fired after the dropdown is shown.
+
+
+
+
+
+
select2-highlight
+
Fired when a choice is highlighted in the dropdown.
+
+
The event object contains the following custom properties:
+
+
val
The id of the highlighted choice object.
+
object
The highlighted choice object.
+
+
+
+
+
+
+
select2-selecting
+
Fired when a choice is being selected in the dropdown, but before any modification has been made to the selection.
+ This event is used to allow the user to reject selection by calling event.preventDefault()
+
+
The event object contains the following custom properties:
+
+
val
The id of the highlighted choice object.
+
object
The choice object about to be selected.
+
+
+
+
+
+
+
select2-clearing
+
Fired when a choice is being cleared in the dropdown, but before any modification has been made to the selection.
+ This event is used to allow the user to reject the clear by calling event.preventDefault()
+
+
For the clear button to be visible the allowClear option needs to be true.
+
+
+
+
+
select2-removing
+
Fired when a choice is about to be removed in the dropdown/input, but before any removal of the choice has been made.
+ This event is used to allow the user to reject removal by calling event.preventDefault()
+
+
The event object contains the following custom properties:
+
+
val
The id of the removing choice object.
+
object
The choice object about to be removed.
+
+
+
+
+
+
+
select2-removed
+
Fired when a choice is removed or cleared.
+
+
The event object contains the following custom properties:
+
+
val
The id of the highlighted choice object.
+
object
The highlighted choice object.
+
+
+
+
+
+
+
select2-loaded
+
Fired when query function is done loading the data and the results list has been updated
+
+
The event object contains the following custom properties:
+
+
items
data that was used to populate the results.
+
+
+
+
+
+
+
select2-focus
+
Fired when the control is focussed.
+
+
+
+
+
+
select2-blur
+
Fired when the control is blurred.
+
+
+
+
-
-
-
Configuring Defaults
- Select2 exposes its default options via the $.fn.select2.defaults object. Properties changed in this object (same properties configurable through the constructor) will take effect for every instance created after the change.
+
+
+
Configuring Defaults
+ Select2 exposes its default options via the $.fn.select2.defaults object. Properties changed in this object (same properties configurable through the constructor) will take effect for every instance created after the change.
+
-
/d" -i bak index.html
+sed -e "s/version: .*/version: $versionregex/" -i bak index.html
+
+sed -e "s/version: .*/version: $nextversionregex/" -i bak select2-latest.html
+sed -e "s/milestone: .*/milestone: $nextmilestone/" -i bak select2-latest.html
+rm index.htmlbak
+rm select2-latest.htmlbak
+
+git add .
+git commit -m "release $version"
+
+echo
+echo
+echo DO NOT FORGET TO PUSH
+echo
+echo
+echo PRESS ANY KEY TO START JEKYLL
+read -n 1 -s
+./jekyll.sh
+
diff --git a/select2-3.4.5/LICENSE b/select2-3.4.5/LICENSE
new file mode 100644
index 00000000..3c98f3df
--- /dev/null
+++ b/select2-3.4.5/LICENSE
@@ -0,0 +1,18 @@
+Copyright 2012 Igor Vaynberg
+
+Version: @@ver@@ Timestamp: @@timestamp@@
+
+This software is licensed under the Apache License, Version 2.0 (the "Apache License") or the GNU
+General Public License version 2 (the "GPL License"). You may choose either license to govern your
+use of this software only upon the condition that you accept all of the terms of either the Apache
+License or the GPL License.
+
+You may obtain a copy of the Apache License and the GPL License at:
+
+http://www.apache.org/licenses/LICENSE-2.0
+http://www.gnu.org/licenses/gpl-2.0.html
+
+Unless required by applicable law or agreed to in writing, software distributed under the Apache License
+or the GPL Licesnse is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied. See the Apache License and the GPL License for the specific language governing
+permissions and limitations under the Apache License and the GPL License.
\ No newline at end of file
diff --git a/select2-3.4.5/README.md b/select2-3.4.5/README.md
new file mode 100644
index 00000000..cb0be3c6
--- /dev/null
+++ b/select2-3.4.5/README.md
@@ -0,0 +1,83 @@
+Select2
+=======
+
+Select2 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
+
+To get started, checkout examples and documentation at http://ivaynberg.github.com/select2
+
+Use cases
+---------
+
+* Enhancing native selects with search.
+* Enhancing native selects with a better multi-select interface.
+* Loading data from JavaScript: easily load items via ajax and have them searchable.
+* Nesting optgroups: native selects only support one level of nested. Select2 does not have this restriction.
+* Tagging: ability to add new items on the fly.
+* Working with large, remote datasets: ability to partially load a dataset based on the search term.
+* Paging of large datasets: easy support for loading more pages when the results are scrolled to the end.
+* Templating: support for custom rendering of results and selections.
+
+Browser compatibility
+---------------------
+* IE 8+
+* Chrome 8+
+* Firefox 10+
+* Safari 3+
+* Opera 10.6+
+
+Integrations
+------------
+
+* [Wicket-Select2](https://github.com/ivaynberg/wicket-select2) (Java / [Apache Wicket](http://wicket.apache.org))
+* [select2-rails](https://github.com/argerim/select2-rails) (Ruby on Rails)
+* [AngularUI](http://angular-ui.github.com/#directives-select2) ([AngularJS](angularjs.org))
+* [Django](https://github.com/applegrew/django-select2)
+* [Symfony](https://github.com/19Gerhard85/sfSelect2WidgetsPlugin)
+* [Bootstrap](https://github.com/t0m/select2-bootstrap-css) (CSS skin)
+* [Yii](https://github.com/tonybolzan/yii-select2)
+
+Internationalization (i18n)
+---------------------------
+
+Select2 supports multiple languages by simply including the right
+language JS file (`select2_locale_it.js`, `select2_locale_nl.js`, etc.).
+
+Missing a language? Just copy `select2_locale_en.js.template`, translate
+it, and make a pull request back to Select2 here on GitHub.
+
+Bug tracker
+-----------
+
+Have a bug? Please create an issue here on GitHub!
+
+https://github.com/ivaynberg/select2/issues
+
+Mailing list
+------------
+
+Have a question? Ask on our mailing list!
+
+select2@googlegroups.com
+
+https://groups.google.com/d/forum/select2
+
+
+Copyright and license
+---------------------
+
+Copyright 2012 Igor Vaynberg
+
+This software is licensed under the Apache License, Version 2.0 (the "Apache License") or the GNU
+General Public License version 2 (the "GPL License"). You may choose either license to govern your
+use of this software only upon the condition that you accept all of the terms of either the Apache
+License or the GPL License.
+
+You may obtain a copy of the Apache License and the GPL License in the LICENSE file, or at:
+
+http://www.apache.org/licenses/LICENSE-2.0
+http://www.gnu.org/licenses/gpl-2.0.html
+
+Unless required by applicable law or agreed to in writing, software distributed under the Apache License
+or the GPL License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied. See the Apache License and the GPL License for the specific language governing
+permissions and limitations under the Apache License and the GPL License.
diff --git a/select2-3.4.5/bower.json b/select2-3.4.5/bower.json
new file mode 100644
index 00000000..887cbf84
--- /dev/null
+++ b/select2-3.4.5/bower.json
@@ -0,0 +1,8 @@
+{
+ "name": "select2",
+ "version": "3.4.5",
+ "main": ["select2.js", "select2.css", "select2.png", "select2x2.png", "select2-spinner.gif"],
+ "dependencies": {
+ "jquery": ">= 1.7.1"
+ }
+}
diff --git a/select2-3.4.5/release.sh b/select2-3.4.5/release.sh
new file mode 100755
index 00000000..92fe0e95
--- /dev/null
+++ b/select2-3.4.5/release.sh
@@ -0,0 +1,73 @@
+#!/bin/bash
+set -e
+
+echo -n "Enter the version for this release: "
+
+read ver
+
+if [ ! $ver ]; then
+ echo "Invalid version."
+ exit
+fi
+
+name="select2"
+js="$name.js"
+mini="$name.min.js"
+css="$name.css"
+release="$name-$ver"
+tag="$ver"
+branch="build-$ver"
+curbranch=`git branch | grep "*" | sed "s/* //"`
+timestamp=$(date)
+tokens="s/@@ver@@/$ver/g;s/\@@timestamp@@/$timestamp/g"
+remote="github"
+
+echo "Pulling from origin"
+
+git pull
+
+echo "Updating Version Identifiers"
+
+sed -E -e "s/\"version\": \"([0-9\.]+)\",/\"version\": \"$ver\",/g" -i "" bower.json select2.jquery.json
+git add bower.json
+git add select2.jquery.json
+git commit -m "modified version identifiers in descriptors for release $ver"
+git push
+
+git branch "$branch"
+git checkout "$branch"
+
+echo "Tokenizing..."
+
+find . -name "$js" | xargs -I{} sed -e "$tokens" -i "" {}
+find . -name "$css" | xargs -I{} sed -e "$tokens" -i "" {}
+sed -e "s/latest/$ver/g" -i "" bower.json
+
+git add "$js"
+git add "$css"
+
+echo "Minifying..."
+
+echo "/*" > "$mini"
+cat LICENSE | sed "$tokens" >> "$mini"
+echo "*/" >> "$mini"
+
+curl -s \
+ --data-urlencode "js_code@$js" \
+ http://marijnhaverbeke.nl/uglifyjs \
+ >> "$mini"
+
+git add "$mini"
+
+git commit -m "release $ver"
+
+echo "Tagging..."
+git tag -a "$tag" -m "tagged version $ver"
+git push "$remote" --tags
+
+echo "Cleaning Up..."
+
+git checkout "$curbranch"
+git branch -D "$branch"
+
+echo "Done"
diff --git a/select2-3.4.5/select2-bootstrap.css b/select2-3.4.5/select2-bootstrap.css
new file mode 100644
index 00000000..90997107
--- /dev/null
+++ b/select2-3.4.5/select2-bootstrap.css
@@ -0,0 +1,87 @@
+.form-control .select2-choice {
+ border: 0;
+ border-radius: 2px;
+}
+
+.form-control .select2-choice .select2-arrow {
+ border-radius: 0 2px 2px 0;
+}
+
+.form-control.select2-container {
+ height: auto !important;
+ padding: 0px;
+}
+
+.form-control.select2-container.select2-dropdown-open {
+ border-color: #5897FB;
+ border-radius: 3px 3px 0 0;
+}
+
+.form-control .select2-container.select2-dropdown-open .select2-choices {
+ border-radius: 3px 3px 0 0;
+}
+
+.form-control.select2-container .select2-choices {
+ border: 0 !important;
+ border-radius: 3px;
+}
+
+.control-group.warning .select2-container .select2-choice,
+.control-group.warning .select2-container .select2-choices,
+.control-group.warning .select2-container-active .select2-choice,
+.control-group.warning .select2-container-active .select2-choices,
+.control-group.warning .select2-dropdown-open.select2-drop-above .select2-choice,
+.control-group.warning .select2-dropdown-open.select2-drop-above .select2-choices,
+.control-group.warning .select2-container-multi.select2-container-active .select2-choices {
+ border: 1px solid #C09853 !important;
+}
+
+.control-group.warning .select2-container .select2-choice div {
+ border-left: 1px solid #C09853 !important;
+ background: #FCF8E3 !important;
+}
+
+.control-group.error .select2-container .select2-choice,
+.control-group.error .select2-container .select2-choices,
+.control-group.error .select2-container-active .select2-choice,
+.control-group.error .select2-container-active .select2-choices,
+.control-group.error .select2-dropdown-open.select2-drop-above .select2-choice,
+.control-group.error .select2-dropdown-open.select2-drop-above .select2-choices,
+.control-group.error .select2-container-multi.select2-container-active .select2-choices {
+ border: 1px solid #B94A48 !important;
+}
+
+.control-group.error .select2-container .select2-choice div {
+ border-left: 1px solid #B94A48 !important;
+ background: #F2DEDE !important;
+}
+
+.control-group.info .select2-container .select2-choice,
+.control-group.info .select2-container .select2-choices,
+.control-group.info .select2-container-active .select2-choice,
+.control-group.info .select2-container-active .select2-choices,
+.control-group.info .select2-dropdown-open.select2-drop-above .select2-choice,
+.control-group.info .select2-dropdown-open.select2-drop-above .select2-choices,
+.control-group.info .select2-container-multi.select2-container-active .select2-choices {
+ border: 1px solid #3A87AD !important;
+}
+
+.control-group.info .select2-container .select2-choice div {
+ border-left: 1px solid #3A87AD !important;
+ background: #D9EDF7 !important;
+}
+
+.control-group.success .select2-container .select2-choice,
+.control-group.success .select2-container .select2-choices,
+.control-group.success .select2-container-active .select2-choice,
+.control-group.success .select2-container-active .select2-choices,
+.control-group.success .select2-dropdown-open.select2-drop-above .select2-choice,
+.control-group.success .select2-dropdown-open.select2-drop-above .select2-choices,
+.control-group.success .select2-container-multi.select2-container-active .select2-choices {
+ border: 1px solid #468847 !important;
+}
+
+.control-group.success .select2-container .select2-choice div {
+ border-left: 1px solid #468847 !important;
+ background: #DFF0D8 !important;
+}
diff --git a/select2-3.4.5/select2-spinner.gif b/select2-3.4.5/select2-spinner.gif
new file mode 100644
index 00000000..5b33f7e5
Binary files /dev/null and b/select2-3.4.5/select2-spinner.gif differ
diff --git a/select2-3.4.5/select2.css b/select2-3.4.5/select2.css
new file mode 100644
index 00000000..2b32ed6f
--- /dev/null
+++ b/select2-3.4.5/select2.css
@@ -0,0 +1,615 @@
+/*
+Version: 3.4.5 Timestamp: Mon Nov 4 08:22:42 PST 2013
+*/
+.select2-container {
+ margin: 0;
+ position: relative;
+ display: inline-block;
+ /* inline-block for ie7 */
+ zoom: 1;
+ *display: inline;
+ vertical-align: middle;
+}
+
+.select2-container,
+.select2-drop,
+.select2-search,
+.select2-search input {
+ /*
+ Force border-box so that % widths fit the parent
+ container without overlap because of margin/padding.
+
+ More Info : http://www.quirksmode.org/css/box.html
+ */
+ -webkit-box-sizing: border-box; /* webkit */
+ -moz-box-sizing: border-box; /* firefox */
+ box-sizing: border-box; /* css3 */
+}
+
+.select2-container .select2-choice {
+ display: block;
+ height: 26px;
+ padding: 0 0 0 8px;
+ overflow: hidden;
+ position: relative;
+
+ border: 1px solid #aaa;
+ white-space: nowrap;
+ line-height: 26px;
+ color: #444;
+ text-decoration: none;
+
+ border-radius: 4px;
+
+ background-clip: padding-box;
+
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+ background-color: #fff;
+ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));
+ background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);
+ background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);
+ background-image: linear-gradient(top, #fff 0%, #eee 50%);
+}
+
+.select2-container.select2-drop-above .select2-choice {
+ border-bottom-color: #aaa;
+
+ border-radius: 0 0 4px 4px;
+
+ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.9, #fff));
+ background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 90%);
+ background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 90%);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0);
+ background-image: linear-gradient(top, #eee 0%, #fff 90%);
+}
+
+.select2-container.select2-allowclear .select2-choice .select2-chosen {
+ margin-right: 42px;
+}
+
+.select2-container .select2-choice > .select2-chosen {
+ margin-right: 26px;
+ display: block;
+ overflow: hidden;
+
+ white-space: nowrap;
+
+ text-overflow: ellipsis;
+}
+
+.select2-container .select2-choice abbr {
+ display: none;
+ width: 12px;
+ height: 12px;
+ position: absolute;
+ right: 24px;
+ top: 8px;
+
+ font-size: 1px;
+ text-decoration: none;
+
+ border: 0;
+ background: url('select2.png') right top no-repeat;
+ cursor: pointer;
+ outline: 0;
+}
+
+.select2-container.select2-allowclear .select2-choice abbr {
+ display: inline-block;
+}
+
+.select2-container .select2-choice abbr:hover {
+ background-position: right -11px;
+ cursor: pointer;
+}
+
+.select2-drop-mask {
+ border: 0;
+ margin: 0;
+ padding: 0;
+ position: fixed;
+ left: 0;
+ top: 0;
+ min-height: 100%;
+ min-width: 100%;
+ height: auto;
+ width: auto;
+ opacity: 0;
+ z-index: 9998;
+ /* styles required for IE to work */
+ background-color: #fff;
+ filter: alpha(opacity=0);
+}
+
+.select2-drop {
+ width: 100%;
+ margin-top: -1px;
+ position: absolute;
+ z-index: 9999;
+ top: 100%;
+
+ background: #fff;
+ color: #000;
+ border: 1px solid #aaa;
+ border-top: 0;
+
+ border-radius: 0 0 4px 4px;
+
+ -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
+ box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
+}
+
+.select2-drop-auto-width {
+ border-top: 1px solid #aaa;
+ width: auto;
+}
+
+.select2-drop-auto-width .select2-search {
+ padding-top: 4px;
+}
+
+.select2-drop.select2-drop-above {
+ margin-top: 1px;
+ border-top: 1px solid #aaa;
+ border-bottom: 0;
+
+ border-radius: 4px 4px 0 0;
+
+ -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
+ box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
+}
+
+.select2-drop-active {
+ border: 1px solid #5897fb;
+ border-top: none;
+}
+
+.select2-drop.select2-drop-above.select2-drop-active {
+ border-top: 1px solid #5897fb;
+}
+
+.select2-container .select2-choice .select2-arrow {
+ display: inline-block;
+ width: 18px;
+ height: 100%;
+ position: absolute;
+ right: 0;
+ top: 0;
+
+ border-left: 1px solid #aaa;
+ border-radius: 0 4px 4px 0;
+
+ background-clip: padding-box;
+
+ background: #ccc;
+ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
+ background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
+ background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0);
+ background-image: linear-gradient(top, #ccc 0%, #eee 60%);
+}
+
+.select2-container .select2-choice .select2-arrow b {
+ display: block;
+ width: 100%;
+ height: 100%;
+ background: url('select2.png') no-repeat 0 1px;
+}
+
+.select2-search {
+ display: inline-block;
+ width: 100%;
+ min-height: 26px;
+ margin: 0;
+ padding-left: 4px;
+ padding-right: 4px;
+
+ position: relative;
+ z-index: 10000;
+
+ white-space: nowrap;
+}
+
+.select2-search input {
+ width: 100%;
+ height: auto !important;
+ min-height: 26px;
+ padding: 4px 20px 4px 5px;
+ margin: 0;
+
+ outline: 0;
+ font-family: sans-serif;
+ font-size: 1em;
+
+ border: 1px solid #aaa;
+ border-radius: 0;
+
+ -webkit-box-shadow: none;
+ box-shadow: none;
+
+ background: #fff url('select2.png') no-repeat 100% -22px;
+ background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
+ background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
+ background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
+ background: url('select2.png') no-repeat 100% -22px, linear-gradient(top, #fff 85%, #eee 99%);
+}
+
+.select2-drop.select2-drop-above .select2-search input {
+ margin-top: 4px;
+}
+
+.select2-search input.select2-active {
+ background: #fff url('select2-spinner.gif') no-repeat 100%;
+ background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
+ background: url('select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
+ background: url('select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
+ background: url('select2-spinner.gif') no-repeat 100%, linear-gradient(top, #fff 85%, #eee 99%);
+}
+
+.select2-container-active .select2-choice,
+.select2-container-active .select2-choices {
+ border: 1px solid #5897fb;
+ outline: none;
+
+ -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+ box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+}
+
+.select2-dropdown-open .select2-choice {
+ border-bottom-color: transparent;
+ -webkit-box-shadow: 0 1px 0 #fff inset;
+ box-shadow: 0 1px 0 #fff inset;
+
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+
+ background-color: #eee;
+ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(0.5, #eee));
+ background-image: -webkit-linear-gradient(center bottom, #fff 0%, #eee 50%);
+ background-image: -moz-linear-gradient(center bottom, #fff 0%, #eee 50%);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
+ background-image: linear-gradient(top, #fff 0%, #eee 50%);
+}
+
+.select2-dropdown-open.select2-drop-above .select2-choice,
+.select2-dropdown-open.select2-drop-above .select2-choices {
+ border: 1px solid #5897fb;
+ border-top-color: transparent;
+
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.5, #eee));
+ background-image: -webkit-linear-gradient(center top, #fff 0%, #eee 50%);
+ background-image: -moz-linear-gradient(center top, #fff 0%, #eee 50%);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
+ background-image: linear-gradient(bottom, #fff 0%, #eee 50%);
+}
+
+.select2-dropdown-open .select2-choice .select2-arrow {
+ background: transparent;
+ border-left: none;
+ filter: none;
+}
+.select2-dropdown-open .select2-choice .select2-arrow b {
+ background-position: -18px 1px;
+}
+
+/* results */
+.select2-results {
+ max-height: 200px;
+ padding: 0 0 0 4px;
+ margin: 4px 4px 4px 0;
+ position: relative;
+ overflow-x: hidden;
+ overflow-y: auto;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.select2-results ul.select2-result-sub {
+ margin: 0;
+ padding-left: 0;
+}
+
+.select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px }
+.select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 80px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 100px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 110px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 120px }
+
+.select2-results li {
+ list-style: none;
+ display: list-item;
+ background-image: none;
+}
+
+.select2-results li.select2-result-with-children > .select2-result-label {
+ font-weight: bold;
+}
+
+.select2-results .select2-result-label {
+ padding: 3px 7px 4px;
+ margin: 0;
+ cursor: pointer;
+
+ min-height: 1em;
+
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.select2-results .select2-highlighted {
+ background: #3875d7;
+ color: #fff;
+}
+
+.select2-results li em {
+ background: #feffde;
+ font-style: normal;
+}
+
+.select2-results .select2-highlighted em {
+ background: transparent;
+}
+
+.select2-results .select2-highlighted ul {
+ background: #fff;
+ color: #000;
+}
+
+
+.select2-results .select2-no-results,
+.select2-results .select2-searching,
+.select2-results .select2-selection-limit {
+ background: #f4f4f4;
+ display: list-item;
+}
+
+/*
+disabled look for disabled choices in the results dropdown
+*/
+.select2-results .select2-disabled.select2-highlighted {
+ color: #666;
+ background: #f4f4f4;
+ display: list-item;
+ cursor: default;
+}
+.select2-results .select2-disabled {
+ background: #f4f4f4;
+ display: list-item;
+ cursor: default;
+}
+
+.select2-results .select2-selected {
+ display: none;
+}
+
+.select2-more-results.select2-active {
+ background: #f4f4f4 url('select2-spinner.gif') no-repeat 100%;
+}
+
+.select2-more-results {
+ background: #f4f4f4;
+ display: list-item;
+}
+
+/* disabled styles */
+
+.select2-container.select2-container-disabled .select2-choice {
+ background-color: #f4f4f4;
+ background-image: none;
+ border: 1px solid #ddd;
+ cursor: default;
+}
+
+.select2-container.select2-container-disabled .select2-choice .select2-arrow {
+ background-color: #f4f4f4;
+ background-image: none;
+ border-left: 0;
+}
+
+.select2-container.select2-container-disabled .select2-choice abbr {
+ display: none;
+}
+
+
+/* multiselect */
+
+.select2-container-multi .select2-choices {
+ height: auto !important;
+ height: 1%;
+ margin: 0;
+ padding: 0;
+ position: relative;
+
+ border: 1px solid #aaa;
+ cursor: text;
+ overflow: hidden;
+
+ background-color: #fff;
+ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eee), color-stop(15%, #fff));
+ background-image: -webkit-linear-gradient(top, #eee 1%, #fff 15%);
+ background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%);
+ background-image: linear-gradient(top, #eee 1%, #fff 15%);
+}
+
+.select2-locked {
+ padding: 3px 5px 3px 5px !important;
+}
+
+.select2-container-multi .select2-choices {
+ min-height: 26px;
+}
+
+.select2-container-multi.select2-container-active .select2-choices {
+ border: 1px solid #5897fb;
+ outline: none;
+
+ -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+ box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+}
+.select2-container-multi .select2-choices li {
+ float: left;
+ list-style: none;
+}
+.select2-container-multi .select2-choices .select2-search-field {
+ margin: 0;
+ padding: 0;
+ white-space: nowrap;
+}
+
+.select2-container-multi .select2-choices .select2-search-field input {
+ padding: 5px;
+ margin: 1px 0;
+
+ font-family: sans-serif;
+ font-size: 100%;
+ color: #666;
+ outline: 0;
+ border: 0;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ background: transparent !important;
+}
+
+.select2-container-multi .select2-choices .select2-search-field input.select2-active {
+ background: #fff url('select2-spinner.gif') no-repeat 100% !important;
+}
+
+.select2-default {
+ color: #999 !important;
+}
+
+.select2-container-multi .select2-choices .select2-search-choice {
+ padding: 3px 5px 3px 18px;
+ margin: 3px 0 3px 5px;
+ position: relative;
+
+ line-height: 13px;
+ color: #333;
+ cursor: default;
+ border: 1px solid #aaaaaa;
+
+ border-radius: 3px;
+
+ -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
+ box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
+
+ background-clip: padding-box;
+
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+ background-color: #e4e4e4;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0);
+ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee));
+ background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
+ background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
+ background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
+}
+.select2-container-multi .select2-choices .select2-search-choice .select2-chosen {
+ cursor: default;
+}
+.select2-container-multi .select2-choices .select2-search-choice-focus {
+ background: #d4d4d4;
+}
+
+.select2-search-choice-close {
+ display: block;
+ width: 12px;
+ height: 13px;
+ position: absolute;
+ right: 3px;
+ top: 4px;
+
+ font-size: 1px;
+ outline: none;
+ background: url('select2.png') right top no-repeat;
+}
+
+.select2-container-multi .select2-search-choice-close {
+ left: 3px;
+}
+
+.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
+ background-position: right -11px;
+}
+.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
+ background-position: right -11px;
+}
+
+/* disabled styles */
+.select2-container-multi.select2-container-disabled .select2-choices {
+ background-color: #f4f4f4;
+ background-image: none;
+ border: 1px solid #ddd;
+ cursor: default;
+}
+
+.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
+ padding: 3px 5px 3px 5px;
+ border: 1px solid #ddd;
+ background-image: none;
+ background-color: #f4f4f4;
+}
+
+.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close { display: none;
+ background: none;
+}
+/* end multiselect */
+
+
+.select2-result-selectable .select2-match,
+.select2-result-unselectable .select2-match {
+ text-decoration: underline;
+}
+
+.select2-offscreen, .select2-offscreen:focus {
+ clip: rect(0 0 0 0) !important;
+ width: 1px !important;
+ height: 1px !important;
+ border: 0 !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ overflow: hidden !important;
+ position: absolute !important;
+ outline: 0 !important;
+ left: 0px !important;
+ top: 0px !important;
+}
+
+.select2-display-none {
+ display: none;
+}
+
+.select2-measure-scrollbar {
+ position: absolute;
+ top: -10000px;
+ left: -10000px;
+ width: 100px;
+ height: 100px;
+ overflow: scroll;
+}
+/* Retina-ize icons */
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
+ .select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice .select2-arrow b {
+ background-image: url('select2x2.png') !important;
+ background-repeat: no-repeat !important;
+ background-size: 60px 40px !important;
+ }
+ .select2-search input {
+ background-position: 100% -21px !important;
+ }
+}
diff --git a/select2-3.4.5/select2.jquery.json b/select2-3.4.5/select2.jquery.json
new file mode 100644
index 00000000..b426c705
--- /dev/null
+++ b/select2-3.4.5/select2.jquery.json
@@ -0,0 +1,36 @@
+{
+ "name": "select2",
+ "title": "Select2",
+ "description": "Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.",
+ "keywords": [
+ "select",
+ "autocomplete",
+ "typeahead",
+ "dropdown",
+ "multiselect",
+ "tag",
+ "tagging"
+ ],
+ "version": "3.4.5",
+ "author": {
+ "name": "Igor Vaynberg",
+ "url": "https://github.com/ivaynberg"
+ },
+ "licenses": [
+ {
+ "type": "Apache",
+ "url": "http://www.apache.org/licenses/LICENSE-2.0"
+ },
+ {
+ "type": "GPL v2",
+ "url": "http://www.gnu.org/licenses/gpl-2.0.html"
+ }
+ ],
+ "bugs": "https://github.com/ivaynberg/select2/issues",
+ "homepage": "http://ivaynberg.github.com/select2",
+ "docs": "http://ivaynberg.github.com/select2/",
+ "download": "https://github.com/ivaynberg/select2/tags",
+ "dependencies": {
+ "jquery": ">=1.7.1"
+ }
+}
diff --git a/select2-3.4.5/select2.js b/select2-3.4.5/select2.js
new file mode 100644
index 00000000..3b5e8e28
--- /dev/null
+++ b/select2-3.4.5/select2.js
@@ -0,0 +1,3255 @@
+/*
+Copyright 2012 Igor Vaynberg
+
+Version: 3.4.5 Timestamp: Mon Nov 4 08:22:42 PST 2013
+
+This software is licensed under the Apache License, Version 2.0 (the "Apache License") or the GNU
+General Public License version 2 (the "GPL License"). You may choose either license to govern your
+use of this software only upon the condition that you accept all of the terms of either the Apache
+License or the GPL License.
+
+You may obtain a copy of the Apache License and the GPL License at:
+
+ http://www.apache.org/licenses/LICENSE-2.0
+ http://www.gnu.org/licenses/gpl-2.0.html
+
+Unless required by applicable law or agreed to in writing, software distributed under the
+Apache License or the GPL Licesnse is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. See the Apache License and the GPL License for
+the specific language governing permissions and limitations under the Apache License and the GPL License.
+*/
+(function ($) {
+ if(typeof $.fn.each2 == "undefined") {
+ $.extend($.fn, {
+ /*
+ * 4-10 times faster .each replacement
+ * use it carefully, as it overrides jQuery context of element on each iteration
+ */
+ each2 : function (c) {
+ var j = $([0]), i = -1, l = this.length;
+ while (
+ ++i < l
+ && (j.context = j[0] = this[i])
+ && c.call(j[0], i, j) !== false //"this"=DOM, i=index, j=jQuery object
+ );
+ return this;
+ }
+ });
+ }
+})(jQuery);
+
+(function ($, undefined) {
+ "use strict";
+ /*global document, window, jQuery, console */
+
+ if (window.Select2 !== undefined) {
+ return;
+ }
+
+ var KEY, AbstractSelect2, SingleSelect2, MultiSelect2, nextUid, sizer,
+ lastMousePosition={x:0,y:0}, $document, scrollBarDimensions,
+
+ KEY = {
+ TAB: 9,
+ ENTER: 13,
+ ESC: 27,
+ SPACE: 32,
+ LEFT: 37,
+ UP: 38,
+ RIGHT: 39,
+ DOWN: 40,
+ SHIFT: 16,
+ CTRL: 17,
+ ALT: 18,
+ PAGE_UP: 33,
+ PAGE_DOWN: 34,
+ HOME: 36,
+ END: 35,
+ BACKSPACE: 8,
+ DELETE: 46,
+ isArrow: function (k) {
+ k = k.which ? k.which : k;
+ switch (k) {
+ case KEY.LEFT:
+ case KEY.RIGHT:
+ case KEY.UP:
+ case KEY.DOWN:
+ return true;
+ }
+ return false;
+ },
+ isControl: function (e) {
+ var k = e.which;
+ switch (k) {
+ case KEY.SHIFT:
+ case KEY.CTRL:
+ case KEY.ALT:
+ return true;
+ }
+
+ if (e.metaKey) return true;
+
+ return false;
+ },
+ isFunctionKey: function (k) {
+ k = k.which ? k.which : k;
+ return k >= 112 && k <= 123;
+ }
+ },
+ MEASURE_SCROLLBAR_TEMPLATE = "",
+
+ DIACRITICS = {"\u24B6":"A","\uFF21":"A","\u00C0":"A","\u00C1":"A","\u00C2":"A","\u1EA6":"A","\u1EA4":"A","\u1EAA":"A","\u1EA8":"A","\u00C3":"A","\u0100":"A","\u0102":"A","\u1EB0":"A","\u1EAE":"A","\u1EB4":"A","\u1EB2":"A","\u0226":"A","\u01E0":"A","\u00C4":"A","\u01DE":"A","\u1EA2":"A","\u00C5":"A","\u01FA":"A","\u01CD":"A","\u0200":"A","\u0202":"A","\u1EA0":"A","\u1EAC":"A","\u1EB6":"A","\u1E00":"A","\u0104":"A","\u023A":"A","\u2C6F":"A","\uA732":"AA","\u00C6":"AE","\u01FC":"AE","\u01E2":"AE","\uA734":"AO","\uA736":"AU","\uA738":"AV","\uA73A":"AV","\uA73C":"AY","\u24B7":"B","\uFF22":"B","\u1E02":"B","\u1E04":"B","\u1E06":"B","\u0243":"B","\u0182":"B","\u0181":"B","\u24B8":"C","\uFF23":"C","\u0106":"C","\u0108":"C","\u010A":"C","\u010C":"C","\u00C7":"C","\u1E08":"C","\u0187":"C","\u023B":"C","\uA73E":"C","\u24B9":"D","\uFF24":"D","\u1E0A":"D","\u010E":"D","\u1E0C":"D","\u1E10":"D","\u1E12":"D","\u1E0E":"D","\u0110":"D","\u018B":"D","\u018A":"D","\u0189":"D","\uA779":"D","\u01F1":"DZ","\u01C4":"DZ","\u01F2":"Dz","\u01C5":"Dz","\u24BA":"E","\uFF25":"E","\u00C8":"E","\u00C9":"E","\u00CA":"E","\u1EC0":"E","\u1EBE":"E","\u1EC4":"E","\u1EC2":"E","\u1EBC":"E","\u0112":"E","\u1E14":"E","\u1E16":"E","\u0114":"E","\u0116":"E","\u00CB":"E","\u1EBA":"E","\u011A":"E","\u0204":"E","\u0206":"E","\u1EB8":"E","\u1EC6":"E","\u0228":"E","\u1E1C":"E","\u0118":"E","\u1E18":"E","\u1E1A":"E","\u0190":"E","\u018E":"E","\u24BB":"F","\uFF26":"F","\u1E1E":"F","\u0191":"F","\uA77B":"F","\u24BC":"G","\uFF27":"G","\u01F4":"G","\u011C":"G","\u1E20":"G","\u011E":"G","\u0120":"G","\u01E6":"G","\u0122":"G","\u01E4":"G","\u0193":"G","\uA7A0":"G","\uA77D":"G","\uA77E":"G","\u24BD":"H","\uFF28":"H","\u0124":"H","\u1E22":"H","\u1E26":"H","\u021E":"H","\u1E24":"H","\u1E28":"H","\u1E2A":"H","\u0126":"H","\u2C67":"H","\u2C75":"H","\uA78D":"H","\u24BE":"I","\uFF29":"I","\u00CC":"I","\u00CD":"I","\u00CE":"I","\u0128":"I","\u012A":"I","\u012C":"I","\u0130":"I","\u00CF":"I","\u1E2E":"I","\u1EC8":"I","\u01CF":"I","\u0208":"I","\u020A":"I","\u1ECA":"I","\u012E":"I","\u1E2C":"I","\u0197":"I","\u24BF":"J","\uFF2A":"J","\u0134":"J","\u0248":"J","\u24C0":"K","\uFF2B":"K","\u1E30":"K","\u01E8":"K","\u1E32":"K","\u0136":"K","\u1E34":"K","\u0198":"K","\u2C69":"K","\uA740":"K","\uA742":"K","\uA744":"K","\uA7A2":"K","\u24C1":"L","\uFF2C":"L","\u013F":"L","\u0139":"L","\u013D":"L","\u1E36":"L","\u1E38":"L","\u013B":"L","\u1E3C":"L","\u1E3A":"L","\u0141":"L","\u023D":"L","\u2C62":"L","\u2C60":"L","\uA748":"L","\uA746":"L","\uA780":"L","\u01C7":"LJ","\u01C8":"Lj","\u24C2":"M","\uFF2D":"M","\u1E3E":"M","\u1E40":"M","\u1E42":"M","\u2C6E":"M","\u019C":"M","\u24C3":"N","\uFF2E":"N","\u01F8":"N","\u0143":"N","\u00D1":"N","\u1E44":"N","\u0147":"N","\u1E46":"N","\u0145":"N","\u1E4A":"N","\u1E48":"N","\u0220":"N","\u019D":"N","\uA790":"N","\uA7A4":"N","\u01CA":"NJ","\u01CB":"Nj","\u24C4":"O","\uFF2F":"O","\u00D2":"O","\u00D3":"O","\u00D4":"O","\u1ED2":"O","\u1ED0":"O","\u1ED6":"O","\u1ED4":"O","\u00D5":"O","\u1E4C":"O","\u022C":"O","\u1E4E":"O","\u014C":"O","\u1E50":"O","\u1E52":"O","\u014E":"O","\u022E":"O","\u0230":"O","\u00D6":"O","\u022A":"O","\u1ECE":"O","\u0150":"O","\u01D1":"O","\u020C":"O","\u020E":"O","\u01A0":"O","\u1EDC":"O","\u1EDA":"O","\u1EE0":"O","\u1EDE":"O","\u1EE2":"O","\u1ECC":"O","\u1ED8":"O","\u01EA":"O","\u01EC":"O","\u00D8":"O","\u01FE":"O","\u0186":"O","\u019F":"O","\uA74A":"O","\uA74C":"O","\u01A2":"OI","\uA74E":"OO","\u0222":"OU","\u24C5":"P","\uFF30":"P","\u1E54":"P","\u1E56":"P","\u01A4":"P","\u2C63":"P","\uA750":"P","\uA752":"P","\uA754":"P","\u24C6":"Q","\uFF31":"Q","\uA756":"Q","\uA758":"Q","\u024A":"Q","\u24C7":"R","\uFF32":"R","\u0154":"R","\u1E58":"R","\u0158":"R","\u0210":"R","\u0212":"R","\u1E5A":"R","\u1E5C":"R","\u0156":"R","\u1E5E":"R","\u024C":"R","\u2C64":"R","\uA75A":"R","\uA7A6":"R","\uA782":"R","\u24C8":"S","\uFF33":"S","\u1E9E":"S","\u015A":"S","\u1E64":"S","\u015C":"S","\u1E60":"S","\u0160":"S","\u1E66":"S","\u1E62":"S","\u1E68":"S","\u0218":"S","\u015E":"S","\u2C7E":"S","\uA7A8":"S","\uA784":"S","\u24C9":"T","\uFF34":"T","\u1E6A":"T","\u0164":"T","\u1E6C":"T","\u021A":"T","\u0162":"T","\u1E70":"T","\u1E6E":"T","\u0166":"T","\u01AC":"T","\u01AE":"T","\u023E":"T","\uA786":"T","\uA728":"TZ","\u24CA":"U","\uFF35":"U","\u00D9":"U","\u00DA":"U","\u00DB":"U","\u0168":"U","\u1E78":"U","\u016A":"U","\u1E7A":"U","\u016C":"U","\u00DC":"U","\u01DB":"U","\u01D7":"U","\u01D5":"U","\u01D9":"U","\u1EE6":"U","\u016E":"U","\u0170":"U","\u01D3":"U","\u0214":"U","\u0216":"U","\u01AF":"U","\u1EEA":"U","\u1EE8":"U","\u1EEE":"U","\u1EEC":"U","\u1EF0":"U","\u1EE4":"U","\u1E72":"U","\u0172":"U","\u1E76":"U","\u1E74":"U","\u0244":"U","\u24CB":"V","\uFF36":"V","\u1E7C":"V","\u1E7E":"V","\u01B2":"V","\uA75E":"V","\u0245":"V","\uA760":"VY","\u24CC":"W","\uFF37":"W","\u1E80":"W","\u1E82":"W","\u0174":"W","\u1E86":"W","\u1E84":"W","\u1E88":"W","\u2C72":"W","\u24CD":"X","\uFF38":"X","\u1E8A":"X","\u1E8C":"X","\u24CE":"Y","\uFF39":"Y","\u1EF2":"Y","\u00DD":"Y","\u0176":"Y","\u1EF8":"Y","\u0232":"Y","\u1E8E":"Y","\u0178":"Y","\u1EF6":"Y","\u1EF4":"Y","\u01B3":"Y","\u024E":"Y","\u1EFE":"Y","\u24CF":"Z","\uFF3A":"Z","\u0179":"Z","\u1E90":"Z","\u017B":"Z","\u017D":"Z","\u1E92":"Z","\u1E94":"Z","\u01B5":"Z","\u0224":"Z","\u2C7F":"Z","\u2C6B":"Z","\uA762":"Z","\u24D0":"a","\uFF41":"a","\u1E9A":"a","\u00E0":"a","\u00E1":"a","\u00E2":"a","\u1EA7":"a","\u1EA5":"a","\u1EAB":"a","\u1EA9":"a","\u00E3":"a","\u0101":"a","\u0103":"a","\u1EB1":"a","\u1EAF":"a","\u1EB5":"a","\u1EB3":"a","\u0227":"a","\u01E1":"a","\u00E4":"a","\u01DF":"a","\u1EA3":"a","\u00E5":"a","\u01FB":"a","\u01CE":"a","\u0201":"a","\u0203":"a","\u1EA1":"a","\u1EAD":"a","\u1EB7":"a","\u1E01":"a","\u0105":"a","\u2C65":"a","\u0250":"a","\uA733":"aa","\u00E6":"ae","\u01FD":"ae","\u01E3":"ae","\uA735":"ao","\uA737":"au","\uA739":"av","\uA73B":"av","\uA73D":"ay","\u24D1":"b","\uFF42":"b","\u1E03":"b","\u1E05":"b","\u1E07":"b","\u0180":"b","\u0183":"b","\u0253":"b","\u24D2":"c","\uFF43":"c","\u0107":"c","\u0109":"c","\u010B":"c","\u010D":"c","\u00E7":"c","\u1E09":"c","\u0188":"c","\u023C":"c","\uA73F":"c","\u2184":"c","\u24D3":"d","\uFF44":"d","\u1E0B":"d","\u010F":"d","\u1E0D":"d","\u1E11":"d","\u1E13":"d","\u1E0F":"d","\u0111":"d","\u018C":"d","\u0256":"d","\u0257":"d","\uA77A":"d","\u01F3":"dz","\u01C6":"dz","\u24D4":"e","\uFF45":"e","\u00E8":"e","\u00E9":"e","\u00EA":"e","\u1EC1":"e","\u1EBF":"e","\u1EC5":"e","\u1EC3":"e","\u1EBD":"e","\u0113":"e","\u1E15":"e","\u1E17":"e","\u0115":"e","\u0117":"e","\u00EB":"e","\u1EBB":"e","\u011B":"e","\u0205":"e","\u0207":"e","\u1EB9":"e","\u1EC7":"e","\u0229":"e","\u1E1D":"e","\u0119":"e","\u1E19":"e","\u1E1B":"e","\u0247":"e","\u025B":"e","\u01DD":"e","\u24D5":"f","\uFF46":"f","\u1E1F":"f","\u0192":"f","\uA77C":"f","\u24D6":"g","\uFF47":"g","\u01F5":"g","\u011D":"g","\u1E21":"g","\u011F":"g","\u0121":"g","\u01E7":"g","\u0123":"g","\u01E5":"g","\u0260":"g","\uA7A1":"g","\u1D79":"g","\uA77F":"g","\u24D7":"h","\uFF48":"h","\u0125":"h","\u1E23":"h","\u1E27":"h","\u021F":"h","\u1E25":"h","\u1E29":"h","\u1E2B":"h","\u1E96":"h","\u0127":"h","\u2C68":"h","\u2C76":"h","\u0265":"h","\u0195":"hv","\u24D8":"i","\uFF49":"i","\u00EC":"i","\u00ED":"i","\u00EE":"i","\u0129":"i","\u012B":"i","\u012D":"i","\u00EF":"i","\u1E2F":"i","\u1EC9":"i","\u01D0":"i","\u0209":"i","\u020B":"i","\u1ECB":"i","\u012F":"i","\u1E2D":"i","\u0268":"i","\u0131":"i","\u24D9":"j","\uFF4A":"j","\u0135":"j","\u01F0":"j","\u0249":"j","\u24DA":"k","\uFF4B":"k","\u1E31":"k","\u01E9":"k","\u1E33":"k","\u0137":"k","\u1E35":"k","\u0199":"k","\u2C6A":"k","\uA741":"k","\uA743":"k","\uA745":"k","\uA7A3":"k","\u24DB":"l","\uFF4C":"l","\u0140":"l","\u013A":"l","\u013E":"l","\u1E37":"l","\u1E39":"l","\u013C":"l","\u1E3D":"l","\u1E3B":"l","\u017F":"l","\u0142":"l","\u019A":"l","\u026B":"l","\u2C61":"l","\uA749":"l","\uA781":"l","\uA747":"l","\u01C9":"lj","\u24DC":"m","\uFF4D":"m","\u1E3F":"m","\u1E41":"m","\u1E43":"m","\u0271":"m","\u026F":"m","\u24DD":"n","\uFF4E":"n","\u01F9":"n","\u0144":"n","\u00F1":"n","\u1E45":"n","\u0148":"n","\u1E47":"n","\u0146":"n","\u1E4B":"n","\u1E49":"n","\u019E":"n","\u0272":"n","\u0149":"n","\uA791":"n","\uA7A5":"n","\u01CC":"nj","\u24DE":"o","\uFF4F":"o","\u00F2":"o","\u00F3":"o","\u00F4":"o","\u1ED3":"o","\u1ED1":"o","\u1ED7":"o","\u1ED5":"o","\u00F5":"o","\u1E4D":"o","\u022D":"o","\u1E4F":"o","\u014D":"o","\u1E51":"o","\u1E53":"o","\u014F":"o","\u022F":"o","\u0231":"o","\u00F6":"o","\u022B":"o","\u1ECF":"o","\u0151":"o","\u01D2":"o","\u020D":"o","\u020F":"o","\u01A1":"o","\u1EDD":"o","\u1EDB":"o","\u1EE1":"o","\u1EDF":"o","\u1EE3":"o","\u1ECD":"o","\u1ED9":"o","\u01EB":"o","\u01ED":"o","\u00F8":"o","\u01FF":"o","\u0254":"o","\uA74B":"o","\uA74D":"o","\u0275":"o","\u01A3":"oi","\u0223":"ou","\uA74F":"oo","\u24DF":"p","\uFF50":"p","\u1E55":"p","\u1E57":"p","\u01A5":"p","\u1D7D":"p","\uA751":"p","\uA753":"p","\uA755":"p","\u24E0":"q","\uFF51":"q","\u024B":"q","\uA757":"q","\uA759":"q","\u24E1":"r","\uFF52":"r","\u0155":"r","\u1E59":"r","\u0159":"r","\u0211":"r","\u0213":"r","\u1E5B":"r","\u1E5D":"r","\u0157":"r","\u1E5F":"r","\u024D":"r","\u027D":"r","\uA75B":"r","\uA7A7":"r","\uA783":"r","\u24E2":"s","\uFF53":"s","\u00DF":"s","\u015B":"s","\u1E65":"s","\u015D":"s","\u1E61":"s","\u0161":"s","\u1E67":"s","\u1E63":"s","\u1E69":"s","\u0219":"s","\u015F":"s","\u023F":"s","\uA7A9":"s","\uA785":"s","\u1E9B":"s","\u24E3":"t","\uFF54":"t","\u1E6B":"t","\u1E97":"t","\u0165":"t","\u1E6D":"t","\u021B":"t","\u0163":"t","\u1E71":"t","\u1E6F":"t","\u0167":"t","\u01AD":"t","\u0288":"t","\u2C66":"t","\uA787":"t","\uA729":"tz","\u24E4":"u","\uFF55":"u","\u00F9":"u","\u00FA":"u","\u00FB":"u","\u0169":"u","\u1E79":"u","\u016B":"u","\u1E7B":"u","\u016D":"u","\u00FC":"u","\u01DC":"u","\u01D8":"u","\u01D6":"u","\u01DA":"u","\u1EE7":"u","\u016F":"u","\u0171":"u","\u01D4":"u","\u0215":"u","\u0217":"u","\u01B0":"u","\u1EEB":"u","\u1EE9":"u","\u1EEF":"u","\u1EED":"u","\u1EF1":"u","\u1EE5":"u","\u1E73":"u","\u0173":"u","\u1E77":"u","\u1E75":"u","\u0289":"u","\u24E5":"v","\uFF56":"v","\u1E7D":"v","\u1E7F":"v","\u028B":"v","\uA75F":"v","\u028C":"v","\uA761":"vy","\u24E6":"w","\uFF57":"w","\u1E81":"w","\u1E83":"w","\u0175":"w","\u1E87":"w","\u1E85":"w","\u1E98":"w","\u1E89":"w","\u2C73":"w","\u24E7":"x","\uFF58":"x","\u1E8B":"x","\u1E8D":"x","\u24E8":"y","\uFF59":"y","\u1EF3":"y","\u00FD":"y","\u0177":"y","\u1EF9":"y","\u0233":"y","\u1E8F":"y","\u00FF":"y","\u1EF7":"y","\u1E99":"y","\u1EF5":"y","\u01B4":"y","\u024F":"y","\u1EFF":"y","\u24E9":"z","\uFF5A":"z","\u017A":"z","\u1E91":"z","\u017C":"z","\u017E":"z","\u1E93":"z","\u1E95":"z","\u01B6":"z","\u0225":"z","\u0240":"z","\u2C6C":"z","\uA763":"z"};
+
+ $document = $(document);
+
+ nextUid=(function() { var counter=1; return function() { return counter++; }; }());
+
+
+ function stripDiacritics(str) {
+ var ret, i, l, c;
+
+ if (!str || str.length < 1) return str;
+
+ ret = "";
+ for (i = 0, l = str.length; i < l; i++) {
+ c = str.charAt(i);
+ ret += DIACRITICS[c] || c;
+ }
+ return ret;
+ }
+
+ function indexOf(value, array) {
+ var i = 0, l = array.length;
+ for (; i < l; i = i + 1) {
+ if (equal(value, array[i])) return i;
+ }
+ return -1;
+ }
+
+ function measureScrollbar () {
+ var $template = $( MEASURE_SCROLLBAR_TEMPLATE );
+ $template.appendTo('body');
+
+ var dim = {
+ width: $template.width() - $template[0].clientWidth,
+ height: $template.height() - $template[0].clientHeight
+ };
+ $template.remove();
+
+ return dim;
+ }
+
+ /**
+ * Compares equality of a and b
+ * @param a
+ * @param b
+ */
+ function equal(a, b) {
+ if (a === b) return true;
+ if (a === undefined || b === undefined) return false;
+ if (a === null || b === null) return false;
+ // Check whether 'a' or 'b' is a string (primitive or object).
+ // The concatenation of an empty string (+'') converts its argument to a string's primitive.
+ if (a.constructor === String) return a+'' === b+''; // a+'' - in case 'a' is a String object
+ if (b.constructor === String) return b+'' === a+''; // b+'' - in case 'b' is a String object
+ return false;
+ }
+
+ /**
+ * Splits the string into an array of values, trimming each value. An empty array is returned for nulls or empty
+ * strings
+ * @param string
+ * @param separator
+ */
+ function splitVal(string, separator) {
+ var val, i, l;
+ if (string === null || string.length < 1) return [];
+ val = string.split(separator);
+ for (i = 0, l = val.length; i < l; i = i + 1) val[i] = $.trim(val[i]);
+ return val;
+ }
+
+ function getSideBorderPadding(element) {
+ return element.outerWidth(false) - element.width();
+ }
+
+ function installKeyUpChangeEvent(element) {
+ var key="keyup-change-value";
+ element.on("keydown", function () {
+ if ($.data(element, key) === undefined) {
+ $.data(element, key, element.val());
+ }
+ });
+ element.on("keyup", function () {
+ var val= $.data(element, key);
+ if (val !== undefined && element.val() !== val) {
+ $.removeData(element, key);
+ element.trigger("keyup-change");
+ }
+ });
+ }
+
+ $document.on("mousemove", function (e) {
+ lastMousePosition.x = e.pageX;
+ lastMousePosition.y = e.pageY;
+ });
+
+ /**
+ * filters mouse events so an event is fired only if the mouse moved.
+ *
+ * filters out mouse events that occur when mouse is stationary but
+ * the elements under the pointer are scrolled.
+ */
+ function installFilteredMouseMove(element) {
+ element.on("mousemove", function (e) {
+ var lastpos = lastMousePosition;
+ if (lastpos === undefined || lastpos.x !== e.pageX || lastpos.y !== e.pageY) {
+ $(e.target).trigger("mousemove-filtered", e);
+ }
+ });
+ }
+
+ /**
+ * Debounces a function. Returns a function that calls the original fn function only if no invocations have been made
+ * within the last quietMillis milliseconds.
+ *
+ * @param quietMillis number of milliseconds to wait before invoking fn
+ * @param fn function to be debounced
+ * @param ctx object to be used as this reference within fn
+ * @return debounced version of fn
+ */
+ function debounce(quietMillis, fn, ctx) {
+ ctx = ctx || undefined;
+ var timeout;
+ return function () {
+ var args = arguments;
+ window.clearTimeout(timeout);
+ timeout = window.setTimeout(function() {
+ fn.apply(ctx, args);
+ }, quietMillis);
+ };
+ }
+
+ /**
+ * A simple implementation of a thunk
+ * @param formula function used to lazily initialize the thunk
+ * @return {Function}
+ */
+ function thunk(formula) {
+ var evaluated = false,
+ value;
+ return function() {
+ if (evaluated === false) { value = formula(); evaluated = true; }
+ return value;
+ };
+ };
+
+ function installDebouncedScroll(threshold, element) {
+ var notify = debounce(threshold, function (e) { element.trigger("scroll-debounced", e);});
+ element.on("scroll", function (e) {
+ if (indexOf(e.target, element.get()) >= 0) notify(e);
+ });
+ }
+
+ function focus($el) {
+ if ($el[0] === document.activeElement) return;
+
+ /* set the focus in a 0 timeout - that way the focus is set after the processing
+ of the current event has finished - which seems like the only reliable way
+ to set focus */
+ window.setTimeout(function() {
+ var el=$el[0], pos=$el.val().length, range;
+
+ $el.focus();
+
+ /* make sure el received focus so we do not error out when trying to manipulate the caret.
+ sometimes modals or others listeners may steal it after its set */
+ if ($el.is(":visible") && el === document.activeElement) {
+
+ /* after the focus is set move the caret to the end, necessary when we val()
+ just before setting focus */
+ if(el.setSelectionRange)
+ {
+ el.setSelectionRange(pos, pos);
+ }
+ else if (el.createTextRange) {
+ range = el.createTextRange();
+ range.collapse(false);
+ range.select();
+ }
+ }
+ }, 0);
+ }
+
+ function getCursorInfo(el) {
+ el = $(el)[0];
+ var offset = 0;
+ var length = 0;
+ if ('selectionStart' in el) {
+ offset = el.selectionStart;
+ length = el.selectionEnd - offset;
+ } else if ('selection' in document) {
+ el.focus();
+ var sel = document.selection.createRange();
+ length = document.selection.createRange().text.length;
+ sel.moveStart('character', -el.value.length);
+ offset = sel.text.length - length;
+ }
+ return { offset: offset, length: length };
+ }
+
+ function killEvent(event) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ function killEventImmediately(event) {
+ event.preventDefault();
+ event.stopImmediatePropagation();
+ }
+
+ function measureTextWidth(e) {
+ if (!sizer){
+ var style = e[0].currentStyle || window.getComputedStyle(e[0], null);
+ sizer = $(document.createElement("div")).css({
+ position: "absolute",
+ left: "-10000px",
+ top: "-10000px",
+ display: "none",
+ fontSize: style.fontSize,
+ fontFamily: style.fontFamily,
+ fontStyle: style.fontStyle,
+ fontWeight: style.fontWeight,
+ letterSpacing: style.letterSpacing,
+ textTransform: style.textTransform,
+ whiteSpace: "nowrap"
+ });
+ sizer.attr("class","select2-sizer");
+ $("body").append(sizer);
+ }
+ sizer.text(e.val());
+ return sizer.width();
+ }
+
+ function syncCssClasses(dest, src, adapter) {
+ var classes, replacements = [], adapted;
+
+ classes = dest.attr("class");
+ if (classes) {
+ classes = '' + classes; // for IE which returns object
+ $(classes.split(" ")).each2(function() {
+ if (this.indexOf("select2-") === 0) {
+ replacements.push(this);
+ }
+ });
+ }
+ classes = src.attr("class");
+ if (classes) {
+ classes = '' + classes; // for IE which returns object
+ $(classes.split(" ")).each2(function() {
+ if (this.indexOf("select2-") !== 0) {
+ adapted = adapter(this);
+ if (adapted) {
+ replacements.push(adapted);
+ }
+ }
+ });
+ }
+ dest.attr("class", replacements.join(" "));
+ }
+
+
+ function markMatch(text, term, markup, escapeMarkup) {
+ var match=stripDiacritics(text.toUpperCase()).indexOf(stripDiacritics(term.toUpperCase())),
+ tl=term.length;
+
+ if (match<0) {
+ markup.push(escapeMarkup(text));
+ return;
+ }
+
+ markup.push(escapeMarkup(text.substring(0, match)));
+ markup.push("");
+ markup.push(escapeMarkup(text.substring(match, match + tl)));
+ markup.push("");
+ markup.push(escapeMarkup(text.substring(match + tl, text.length)));
+ }
+
+ function defaultEscapeMarkup(markup) {
+ var replace_map = {
+ '\\': '\',
+ '&': '&',
+ '<': '<',
+ '>': '>',
+ '"': '"',
+ "'": ''',
+ "/": '/'
+ };
+
+ return String(markup).replace(/[&<>"'\/\\]/g, function (match) {
+ return replace_map[match];
+ });
+ }
+
+ /**
+ * Produces an ajax-based query function
+ *
+ * @param options object containing configuration paramters
+ * @param options.params parameter map for the transport ajax call, can contain such options as cache, jsonpCallback, etc. see $.ajax
+ * @param options.transport function that will be used to execute the ajax request. must be compatible with parameters supported by $.ajax
+ * @param options.url url for the data
+ * @param options.data a function(searchTerm, pageNumber, context) that should return an object containing query string parameters for the above url.
+ * @param options.dataType request data type: ajax, jsonp, other datatatypes supported by jQuery's $.ajax function or the transport function if specified
+ * @param options.quietMillis (optional) milliseconds to wait before making the ajaxRequest, helps debounce the ajax function if invoked too often
+ * @param options.results a function(remoteData, pageNumber) that converts data returned form the remote request to the format expected by Select2.
+ * The expected format is an object containing the following keys:
+ * results array of objects that will be used as choices
+ * more (optional) boolean indicating whether there are more results available
+ * Example: {results:[{id:1, text:'Red'},{id:2, text:'Blue'}], more:true}
+ */
+ function ajax(options) {
+ var timeout, // current scheduled but not yet executed request
+ handler = null,
+ quietMillis = options.quietMillis || 100,
+ ajaxUrl = options.url,
+ self = this;
+
+ return function (query) {
+ window.clearTimeout(timeout);
+ timeout = window.setTimeout(function () {
+ var data = options.data, // ajax data function
+ url = ajaxUrl, // ajax url string or function
+ transport = options.transport || $.fn.select2.ajaxDefaults.transport,
+ // deprecated - to be removed in 4.0 - use params instead
+ deprecated = {
+ type: options.type || 'GET', // set type of request (GET or POST)
+ cache: options.cache || false,
+ jsonpCallback: options.jsonpCallback||undefined,
+ dataType: options.dataType||"json"
+ },
+ params = $.extend({}, $.fn.select2.ajaxDefaults.params, deprecated);
+
+ data = data ? data.call(self, query.term, query.page, query.context) : null;
+ url = (typeof url === 'function') ? url.call(self, query.term, query.page, query.context) : url;
+
+ if (handler) { handler.abort(); }
+
+ if (options.params) {
+ if ($.isFunction(options.params)) {
+ $.extend(params, options.params.call(self));
+ } else {
+ $.extend(params, options.params);
+ }
+ }
+
+ $.extend(params, {
+ url: url,
+ dataType: options.dataType,
+ data: data,
+ success: function (data) {
+ // TODO - replace query.page with query so users have access to term, page, etc.
+ var results = options.results(data, query.page);
+ query.callback(results);
+ }
+ });
+ handler = transport.call(self, params);
+ }, quietMillis);
+ };
+ }
+
+ /**
+ * Produces a query function that works with a local array
+ *
+ * @param options object containing configuration parameters. The options parameter can either be an array or an
+ * object.
+ *
+ * If the array form is used it is assumed that it contains objects with 'id' and 'text' keys.
+ *
+ * If the object form is used ti is assumed that it contains 'data' and 'text' keys. The 'data' key should contain
+ * an array of objects that will be used as choices. These objects must contain at least an 'id' key. The 'text'
+ * key can either be a String in which case it is expected that each element in the 'data' array has a key with the
+ * value of 'text' which will be used to match choices. Alternatively, text can be a function(item) that can extract
+ * the text.
+ */
+ function local(options) {
+ var data = options, // data elements
+ dataText,
+ tmp,
+ text = function (item) { return ""+item.text; }; // function used to retrieve the text portion of a data item that is matched against the search
+
+ if ($.isArray(data)) {
+ tmp = data;
+ data = { results: tmp };
+ }
+
+ if ($.isFunction(data) === false) {
+ tmp = data;
+ data = function() { return tmp; };
+ }
+
+ var dataItem = data();
+ if (dataItem.text) {
+ text = dataItem.text;
+ // if text is not a function we assume it to be a key name
+ if (!$.isFunction(text)) {
+ dataText = dataItem.text; // we need to store this in a separate variable because in the next step data gets reset and data.text is no longer available
+ text = function (item) { return item[dataText]; };
+ }
+ }
+
+ return function (query) {
+ var t = query.term, filtered = { results: [] }, process;
+ if (t === "") {
+ query.callback(data());
+ return;
+ }
+
+ process = function(datum, collection) {
+ var group, attr;
+ datum = datum[0];
+ if (datum.children) {
+ group = {};
+ for (attr in datum) {
+ if (datum.hasOwnProperty(attr)) group[attr]=datum[attr];
+ }
+ group.children=[];
+ $(datum.children).each2(function(i, childDatum) { process(childDatum, group.children); });
+ if (group.children.length || query.matcher(t, text(group), datum)) {
+ collection.push(group);
+ }
+ } else {
+ if (query.matcher(t, text(datum), datum)) {
+ collection.push(datum);
+ }
+ }
+ };
+
+ $(data().results).each2(function(i, datum) { process(datum, filtered.results); });
+ query.callback(filtered);
+ };
+ }
+
+ // TODO javadoc
+ function tags(data) {
+ var isFunc = $.isFunction(data);
+ return function (query) {
+ var t = query.term, filtered = {results: []};
+ $(isFunc ? data() : data).each(function () {
+ var isObject = this.text !== undefined,
+ text = isObject ? this.text : this;
+ if (t === "" || query.matcher(t, text)) {
+ filtered.results.push(isObject ? this : {id: this, text: this});
+ }
+ });
+ query.callback(filtered);
+ };
+ }
+
+ /**
+ * Checks if the formatter function should be used.
+ *
+ * Throws an error if it is not a function. Returns true if it should be used,
+ * false if no formatting should be performed.
+ *
+ * @param formatter
+ */
+ function checkFormatter(formatter, formatterName) {
+ if ($.isFunction(formatter)) return true;
+ if (!formatter) return false;
+ throw new Error(formatterName +" must be a function or a falsy value");
+ }
+
+ function evaluate(val) {
+ return $.isFunction(val) ? val() : val;
+ }
+
+ function countResults(results) {
+ var count = 0;
+ $.each(results, function(i, item) {
+ if (item.children) {
+ count += countResults(item.children);
+ } else {
+ count++;
+ }
+ });
+ return count;
+ }
+
+ /**
+ * Default tokenizer. This function uses breaks the input on substring match of any string from the
+ * opts.tokenSeparators array and uses opts.createSearchChoice to create the choice object. Both of those
+ * two options have to be defined in order for the tokenizer to work.
+ *
+ * @param input text user has typed so far or pasted into the search field
+ * @param selection currently selected choices
+ * @param selectCallback function(choice) callback tho add the choice to selection
+ * @param opts select2's opts
+ * @return undefined/null to leave the current input unchanged, or a string to change the input to the returned value
+ */
+ function defaultTokenizer(input, selection, selectCallback, opts) {
+ var original = input, // store the original so we can compare and know if we need to tell the search to update its text
+ dupe = false, // check for whether a token we extracted represents a duplicate selected choice
+ token, // token
+ index, // position at which the separator was found
+ i, l, // looping variables
+ separator; // the matched separator
+
+ if (!opts.createSearchChoice || !opts.tokenSeparators || opts.tokenSeparators.length < 1) return undefined;
+
+ while (true) {
+ index = -1;
+
+ for (i = 0, l = opts.tokenSeparators.length; i < l; i++) {
+ separator = opts.tokenSeparators[i];
+ index = input.indexOf(separator);
+ if (index >= 0) break;
+ }
+
+ if (index < 0) break; // did not find any token separator in the input string, bail
+
+ token = input.substring(0, index);
+ input = input.substring(index + separator.length);
+
+ if (token.length > 0) {
+ token = opts.createSearchChoice.call(this, token, selection);
+ if (token !== undefined && token !== null && opts.id(token) !== undefined && opts.id(token) !== null) {
+ dupe = false;
+ for (i = 0, l = selection.length; i < l; i++) {
+ if (equal(opts.id(token), opts.id(selection[i]))) {
+ dupe = true; break;
+ }
+ }
+
+ if (!dupe) selectCallback(token);
+ }
+ }
+ }
+
+ if (original!==input) return input;
+ }
+
+ /**
+ * Creates a new class
+ *
+ * @param superClass
+ * @param methods
+ */
+ function clazz(SuperClass, methods) {
+ var constructor = function () {};
+ constructor.prototype = new SuperClass;
+ constructor.prototype.constructor = constructor;
+ constructor.prototype.parent = SuperClass.prototype;
+ constructor.prototype = $.extend(constructor.prototype, methods);
+ return constructor;
+ }
+
+ AbstractSelect2 = clazz(Object, {
+
+ // abstract
+ bind: function (func) {
+ var self = this;
+ return function () {
+ func.apply(self, arguments);
+ };
+ },
+
+ // abstract
+ init: function (opts) {
+ var results, search, resultsSelector = ".select2-results";
+
+ // prepare options
+ this.opts = opts = this.prepareOpts(opts);
+
+ this.id=opts.id;
+
+ // destroy if called on an existing component
+ if (opts.element.data("select2") !== undefined &&
+ opts.element.data("select2") !== null) {
+ opts.element.data("select2").destroy();
+ }
+
+ this.container = this.createContainer();
+
+ this.containerId="s2id_"+(opts.element.attr("id") || "autogen"+nextUid());
+ this.containerSelector="#"+this.containerId.replace(/([;&,\.\+\*\~':"\!\^#$%@\[\]\(\)=>\|])/g, '\\$1');
+ this.container.attr("id", this.containerId);
+
+ // cache the body so future lookups are cheap
+ this.body = thunk(function() { return opts.element.closest("body"); });
+
+ syncCssClasses(this.container, this.opts.element, this.opts.adaptContainerCssClass);
+
+ this.container.attr("style", opts.element.attr("style"));
+ this.container.css(evaluate(opts.containerCss));
+ this.container.addClass(evaluate(opts.containerCssClass));
+
+ this.elementTabIndex = this.opts.element.attr("tabindex");
+
+ // swap container for the element
+ this.opts.element
+ .data("select2", this)
+ .attr("tabindex", "-1")
+ .before(this.container)
+ .on("click.select2", killEvent); // do not leak click events
+
+ this.container.data("select2", this);
+
+ this.dropdown = this.container.find(".select2-drop");
+
+ syncCssClasses(this.dropdown, this.opts.element, this.opts.adaptDropdownCssClass);
+
+ this.dropdown.addClass(evaluate(opts.dropdownCssClass));
+ this.dropdown.data("select2", this);
+ this.dropdown.on("click", killEvent);
+
+ this.results = results = this.container.find(resultsSelector);
+ this.search = search = this.container.find("input.select2-input");
+
+ this.queryCount = 0;
+ this.resultsPage = 0;
+ this.context = null;
+
+ // initialize the container
+ this.initContainer();
+
+ this.container.on("click", killEvent);
+
+ installFilteredMouseMove(this.results);
+ this.dropdown.on("mousemove-filtered touchstart touchmove touchend", resultsSelector, this.bind(this.highlightUnderEvent));
+
+ installDebouncedScroll(80, this.results);
+ this.dropdown.on("scroll-debounced", resultsSelector, this.bind(this.loadMoreIfNeeded));
+
+ // do not propagate change event from the search field out of the component
+ $(this.container).on("change", ".select2-input", function(e) {e.stopPropagation();});
+ $(this.dropdown).on("change", ".select2-input", function(e) {e.stopPropagation();});
+
+ // if jquery.mousewheel plugin is installed we can prevent out-of-bounds scrolling of results via mousewheel
+ if ($.fn.mousewheel) {
+ results.mousewheel(function (e, delta, deltaX, deltaY) {
+ var top = results.scrollTop();
+ if (deltaY > 0 && top - deltaY <= 0) {
+ results.scrollTop(0);
+ killEvent(e);
+ } else if (deltaY < 0 && results.get(0).scrollHeight - results.scrollTop() + deltaY <= results.height()) {
+ results.scrollTop(results.get(0).scrollHeight - results.height());
+ killEvent(e);
+ }
+ });
+ }
+
+ installKeyUpChangeEvent(search);
+ search.on("keyup-change input paste", this.bind(this.updateResults));
+ search.on("focus", function () { search.addClass("select2-focused"); });
+ search.on("blur", function () { search.removeClass("select2-focused");});
+
+ this.dropdown.on("mouseup", resultsSelector, this.bind(function (e) {
+ if ($(e.target).closest(".select2-result-selectable").length > 0) {
+ this.highlightUnderEvent(e);
+ this.selectHighlighted(e);
+ }
+ }));
+
+ // trap all mouse events from leaving the dropdown. sometimes there may be a modal that is listening
+ // for mouse events outside of itself so it can close itself. since the dropdown is now outside the select2's
+ // dom it will trigger the popup close, which is not what we want
+ this.dropdown.on("click mouseup mousedown", function (e) { e.stopPropagation(); });
+
+ if ($.isFunction(this.opts.initSelection)) {
+ // initialize selection based on the current value of the source element
+ this.initSelection();
+
+ // if the user has provided a function that can set selection based on the value of the source element
+ // we monitor the change event on the element and trigger it, allowing for two way synchronization
+ this.monitorSource();
+ }
+
+ if (opts.maximumInputLength !== null) {
+ this.search.attr("maxlength", opts.maximumInputLength);
+ }
+
+ var disabled = opts.element.prop("disabled");
+ if (disabled === undefined) disabled = false;
+ this.enable(!disabled);
+
+ var readonly = opts.element.prop("readonly");
+ if (readonly === undefined) readonly = false;
+ this.readonly(readonly);
+
+ // Calculate size of scrollbar
+ scrollBarDimensions = scrollBarDimensions || measureScrollbar();
+
+ this.autofocus = opts.element.prop("autofocus");
+ opts.element.prop("autofocus", false);
+ if (this.autofocus) this.focus();
+
+ this.nextSearchTerm = undefined;
+ },
+
+ // abstract
+ destroy: function () {
+ var element=this.opts.element, select2 = element.data("select2");
+
+ this.close();
+
+ if (this.propertyObserver) { delete this.propertyObserver; this.propertyObserver = null; }
+
+ if (select2 !== undefined) {
+ select2.container.remove();
+ select2.dropdown.remove();
+ element
+ .removeClass("select2-offscreen")
+ .removeData("select2")
+ .off(".select2")
+ .prop("autofocus", this.autofocus || false);
+ if (this.elementTabIndex) {
+ element.attr({tabindex: this.elementTabIndex});
+ } else {
+ element.removeAttr("tabindex");
+ }
+ element.show();
+ }
+ },
+
+ // abstract
+ optionToData: function(element) {
+ if (element.is("option")) {
+ return {
+ id:element.prop("value"),
+ text:element.text(),
+ element: element.get(),
+ css: element.attr("class"),
+ disabled: element.prop("disabled"),
+ locked: equal(element.attr("locked"), "locked") || equal(element.data("locked"), true)
+ };
+ } else if (element.is("optgroup")) {
+ return {
+ text:element.attr("label"),
+ children:[],
+ element: element.get(),
+ css: element.attr("class")
+ };
+ }
+ },
+
+ // abstract
+ prepareOpts: function (opts) {
+ var element, select, idKey, ajaxUrl, self = this;
+
+ element = opts.element;
+
+ if (element.get(0).tagName.toLowerCase() === "select") {
+ this.select = select = opts.element;
+ }
+
+ if (select) {
+ // these options are not allowed when attached to a select because they are picked up off the element itself
+ $.each(["id", "multiple", "ajax", "query", "createSearchChoice", "initSelection", "data", "tags"], function () {
+ if (this in opts) {
+ throw new Error("Option '" + this + "' is not allowed for Select2 when attached to a