Select2Tokenizer
Since V1.1.0
Select2Tokenizer is a component which allow the user to select multiple values as 'tokens' from a search field. The component is implemented on top of the Select2 library.
Table of contents
The component has it's own CSS selector to be used for the restyle of the component. Note that fine-grained styling of the component is depending on the internal selectors of the select2 libary
| element selector | summary |
|---|---|
| .svy-select2-autotokenizer | style the select2tokenizer |
| Property | Type | Default | Description |
|---|---|---|---|
| Boolean | allowNewEntries | false | Allow the user to enter new entries not available in valuelist |
| Boolean | closeOnSelect | true | Allow the user to select multiple options before closing the dropdown when set to false. |
| Boolean | selectOnClose | false | Select the highlighted option when closing the dropdown. |
| String | dataProvider | The dataprovider of the component. Show the dataprovider value as selected tokens. Multiple choices in dataProvider are separated by a new line character '\n'. | |
| Boolean | enabled | true | The enable state of the component, default true. |
| String | noMatchesFoundText | No matches found | The message shown when no matches are found. |
| String | placeholderText | Select... | The placeholder text shown when there is no selected value. |
| Number | tabSeq | The element's tab sequence | |
| String | toolTipText | The text displayed when hovering over the component with a mouse cursor. | |
| String | styleClass | the element style Classes. | |
| Valuelist | valuelist | The valuelist that is used by this field to populate the list of items in the dropdown. The displayValue "-" is a special item which is replaced with a divider between the previous and the next items in menu. | |
| Boolean | visible | true | The visible property of the component, default true. |
| Event | Params | Return | Description |
|---|---|---|---|
| onDataChange | oldValue:String, newValue:String, event:JSEvent | Boolean | Method that is executed when the data in the component is successfully changed. |
| Multiple entries are separated by a new line char '\n' | |||
| onFocusGained | event:JSEvent | The method that is executed when the component gains focus. | |
| onFocusLost | event:JSEvent | The method that is executed when the component looses focus. |
There are currently no API available for select2tokenizer