Tokenizer
Properties
Property | Type | Default | Description |
---|---|---|---|
label | string | '' | Label text for the input field. |
placeholder | string | '' | Text displayed when no value is entered in the input field. |
items | Array<object> | Array of items to be displayed. The display text is determined using the labelField property. | |
suggestCount | number | 6 | Number of items to be displayed in the suggestion list. |
labelField | string|Function | null | Defines the field that determines the value of items to be displayed. |
closeOnSelect | boolean | true | Defines whether to automatically close the suggestion list upon item selection. |
closeOnFocusOut | boolean | true | Defines whether to automatically close the suggestion list on focus out. |
closeOnOutsideDown | boolean | true | Defines whether to automatically close the suggestion list on outside click. |
inputValue | string | '' | Current value entered in the input field. |
minChar | number | 0 | Minimum number of characters required to activate the suggestion list. |
clearable | boolean | false | Whether to enable the reset button when the input field has a value. |
delimiterOnKeys | Array<number> | [9, 13] | Array of key codes that trigger value input when pressed by the user. |
coordinateMode | 'global'|'relative'|'none' | relative | Sets the coordinate system for the popup. |
filterable | boolean | false | Whether items in the combobox can be filtered based on the user's input string. |
chipRemovable | boolean | false | Whether to enable the delete button for displayed items. |
filter | (item: any, keyword: string) => boolean | Defines a comparison function for filtering items. When the filtering property is true , only filtered items are displayed in the list based on this function's return value. | |
allowMultiple | boolean | false | Whether users can select multiple items. |
requireSelection | boolean | false | Whether at least one item must always be selected. |
valueField | string | Name of the field that determines the value of the selected item. | |
selectedItem | object | Defines the selected item. | |
selectedItems | Array<object> | Defines multiple selected items. | |
selectedValue | Array<string> | Defines the valueField property values of the selected items. |
Methods
Method | Parameters | Return Value | Description |
---|---|---|---|
focus | void | Sets focus to the input field. | |
blur | void | Removes focus from the input field. | |
openSuggest | value?: string | boolean | Opens the suggestion list. Retrieves and displays the suggestion list using the value parameter and suggestSource property. |
closeSuggest | void | Closes the suggestion list. | |
clear | void | Resets the entered value, displayed suggestion list, and selected item. |
Events
Event | Type | Description |
---|---|---|
suggest-caret-change | (event: CustomEvent<{value: number; oldValue: number}>) => void | Occurs when the cursor index changes in the suggestion list. |
suggest-opening | (event: SuggestEvent<T>) => void | Occurs before the suggestion list opens. |
suggest-open | (event: SuggestEvent<T>) => void | Occurs when the suggestion list opens. |
suggest-closing | (event: SuggestEvent<T>) => void | Occurs before the suggestion list closes. |
suggest-close | (event: SuggestEvent<T>) => void | Occurs when the suggestion list closes. |
suggest-item-down | (event: SuggestEvent<T>) => void | Occurs when mouse down on a suggestion list item. Occurs when selectOnClick is false. |
suggest-item-click | (event: SuggestEvent<T>) => void | Occurs when mouse click on a suggestion list item. Occurs when selectOnClick is true. |
suggest-select | (event: SuggestEvent<T>) => void | Occurs when a specific item is selected from the suggestion list. |
value-change | (event: CustomEvent<{value: string; oldValue: string}>) => void | Occurs when the value property changes. |
input | (event: CustomEvent<{value: string; trigger: InputEvent}>) => void | Occurs when the input element's value changes. |
keydown | (event: CustomEvent<{value: string; trigger: KeyboardEvent}>) => void | Occurs when a key is pressed on the input element. |
keyup | (event: CustomEvent<{value: string; trigger: KeyboardEvent}>) => void | Occurs when a key is released on the input element. |
focusin | (event: CustomEvent<{trigger: Event}>) => void | Occurs when focus is received. |
focusout | (event: CustomEvent<{trigger: Event}>) => void | Occurs when focus is lost. |
suggest-add | (event: SuggestEvent<T>) => void | Occurs when a token item is added. |
suggest-remove | (event: SuggestEvent<T>) => void | Occurs when a token item is removed. |
suggest-duplicate | (event: SuggestEvent<T>) => void | Occurs when there is a duplicate item when adding a token item. |