MultiComboInput JAVASCRIPT UI Component API

MultiComboInput Javascript API

Class

MultiComboInput

MultiComboInput

MultiComboInput specifies an input field where the user can enter data. Auto-complete options with checkbxoes are displayed for easier input. Allows multiple selection. Selected items are added to the input field as tags.

Selector

smart-multi-combo-input

Properties

AanimationSets or gets the animation mode. Animation is disabled when the property is set to 'none'
AautoCompleteDelayDetermines the delay before the drop down opens to show the matches from the auto complete operation. The delay is measured in miliseconds.
HhideInputTagsCloseButtonEnables or disables the close buttons when multiple items are selected.
CcolorItemsEnables or disables whether when an item has a 'color' property set, the tag of that item will set automatically the background to that color.
DdataSourceDetermines the data source that will be loaded to the MutliInput. The dataSource can be an array of strings/numbers or objects where the attributes represent the properties of a List Item. For example label, value. It can also be a callback that returns an Array of items as previously described.
DdisabledEnables or disables the element.
DdropDownButtonPositionDetermines the position of the drop down button.
DdropDownHeightSets the height of the drop down. By default it's set to an empty string. In this case the height of the drop down is controlled by a CSS variable.
DdropDownWidthSets the width of the drop down. By default it's set to an empty string. In this case the width of the drop down is controlled by a CSS variable.
IinputPurposeSets the purpose of the input and what, if any, permission the user agent has to provide automated assistance in filling out the element's input when in a form, as well as guidance to the browser as to the type of information expected in the element. This value corresponds to the standard HTML autocomplete attribute and can be set to values such as 'on', 'name', 'organization', 'street-address', etc.
IitemsDetermines the maximum number of matched items that should be visible inside the drop down as a result of a new autoComplete query. By default the maximum number of 8 items can be displayed inside the drop down.
LlocaleSets or gets the language. Used in conjunction with the property messages.
LlocalizeFormatFunctionCallback used to customize the format of the messages that are returned from the Localization Module.
MmessagesSets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
MminLengthDetermines the minimum number of characters inside the input in order to trigger the autocomplete functionality that will open the drop down and show the matched items.
NnameSets or gets the name attribute for the element. Name is used when submiting data inside an HTML form.
OopenedDetermines whether the drop down is opened or not.
PplaceholderDetermines the placeholder of the input.
PpillsEnables or disables whether drop-down items are rendered as pills.
QquerySets or gets the query that is used to filter the items. Query is used by the autoComplete operation. Empty string means that all items from the data source will be displayed and no filter query is applied.
QqueryModeDetermines the auto complete query mode. This property also determines the matching algorithm for the autocomplete operation.
RreadonlyDetermines whether ot not the user can enter text inside the input. if dropDownButtonPosition is set to 'left' or 'right' then readonly determines whether the element acts as a ComboBox or a DropDownList if a dataSource is provided.
RrightToLeftSets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
SseparatorDetermines the delimiter between the tags in the input field.
SsingleSelectDetermines whether only a single item can be selected.
SselectAllDetermines whether an additional item is displayed as the first item in the options list, which allows to select/unselect all items.
SselectedValuesGets or sets an array of selected values.
SsortedDetermines whether the items are sorted alphabetically or not
SsortDirectionDetermines the sorting algorithm - ascending(asc) or descending(desc) if sort is enabled.
IinputTagsModeDetermines whether the input field will contain tags for each selected item from the popup or just one that shows the number of selected items.
TthemeDetermines the theme for the element. Themes define the look of the elements.
TtypeDetermines the input type. Input type determines what input can be entered.
UunfocusableIf is set to true, the element cannot be focused.
VvalueSets or gets the value of the element.

Events

CchangeThis event is triggered when the selection is changed.

Methods

CcloseCloses the drop down.
EensureVisibleEnsures that the active ( selected ) item is always visible.
OopenOpens the drop down.
SselectSelects the text inside the input or if it is readonly then the element is focused.

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property. 

 <smart-multi-combo-input animation='none'></smart-multi-combo-input>

Set the animation property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.animation = 'simple';

Get the animation property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let animation = multicomboinput.animation;

autoCompleteDelaynumber

Determines the delay before the drop down opens to show the matches from the auto complete operation. The delay is measured in miliseconds.

Default value

100

Example

Set the autoCompleteDelay property. 

 <smart-multi-combo-input auto-complete-delay='50'></smart-multi-combo-input>

Set the autoCompleteDelay property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.autoCompleteDelay = 200;

Get the autoCompleteDelay property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let autoCompleteDelay = multicomboinput.autoCompleteDelay;

hideInputTagsCloseButtonboolean

Enables or disables the close buttons when multiple items are selected.

Default value

false
Try a demo showcasing the hideInputTagsCloseButton property.

Example

Set the hideInputTagsCloseButton property. 

 <smart-multi-combo-input hide-input-tags-close-button></smart-multi-combo-input>

Set the hideInputTagsCloseButton property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.hideInputTagsCloseButton = false;

Get the hideInputTagsCloseButton property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let hideInputTagsCloseButton = multicomboinput.hideInputTagsCloseButton;

colorItemsboolean

Enables or disables whether when an item has a 'color' property set, the tag of that item will set automatically the background to that color.

Default value

true
Try a demo showcasing the colorItems property.

Example

Set the colorItems property. 

 <smart-multi-combo-input color-items></smart-multi-combo-input>

Set the colorItems property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.colorItems = false;

Get the colorItems property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let colorItems = multicomboinput.colorItems;

dataSourceany

Determines the data source that will be loaded to the MutliInput. The dataSource can be an array of strings/numbers or objects where the attributes represent the properties of a List Item. For example label, value. It can also be a callback that returns an Array of items as previously described.

Try a demo showcasing the dataSource property.

Example

Set the dataSource property. 

 <smart-multi-combo-input data-source='[{ label: "item 1", value: 1 }, { label: "item 2", value: 2 }]'></smart-multi-combo-input>

Set the dataSource property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.dataSource = ["new item 1", "new item 2"];

Get the dataSource property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let dataSource = multicomboinput.dataSource;

disabledboolean

Enables or disables the element.

Default value

false
Try a demo showcasing the disabled property.

Example

Set the disabled property. 

 <smart-multi-combo-input disabled></smart-multi-combo-input>

Set the disabled property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.disabled = false;

Get the disabled property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let disabled = multicomboinput.disabled;

dropDownButtonPosition"none" | "left" | "right"

Determines the position of the drop down button.

Allowed Values

  • "none" - The drop down button is hidden and the element acts as a simple input.
  • "left" - A drop down button is displayed on the left side of the element. The element acts as a DropDownList or a ComboBox depending on the readonly property.
  • "right" - A drop down button is displayed on the right side of the element. The element acts as a DropDownList or a ComboBox depending on the readonly property.

Default value

"right"
Try a demo showcasing the dropDownButtonPosition property.

Example

Set the dropDownButtonPosition property. 

 <smart-multi-combo-input drop-down-button-position='top'></smart-multi-combo-input>

Set the dropDownButtonPosition property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.dropDownButtonPosition = 'bottom';

Get the dropDownButtonPosition property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let dropDownButtonPosition = multicomboinput.dropDownButtonPosition;

dropDownHeightstring | number

Sets the height of the drop down. By default it's set to an empty string. In this case the height of the drop down is controlled by a CSS variable.

Default value

""

Example

Set the dropDownHeight property. 

 <smart-multi-combo-input drop-down-height='300'></smart-multi-combo-input>

Set the dropDownHeight property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.dropDownHeight = 500;

Get the dropDownHeight property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let dropDownHeight = multicomboinput.dropDownHeight;

dropDownWidthstring | number

Sets the width of the drop down. By default it's set to an empty string. In this case the width of the drop down is controlled by a CSS variable.

Default value

""

Example

Set the dropDownWidth property. 

 <smart-multi-combo-input drop-down-width='300'></smart-multi-combo-input>

Set the dropDownWidth property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.dropDownWidth = 500;

Get the dropDownWidth property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let dropDownWidth = multicomboinput.dropDownWidth;

inputPurposestring

Sets the purpose of the input and what, if any, permission the user agent has to provide automated assistance in filling out the element's input when in a form, as well as guidance to the browser as to the type of information expected in the element. This value corresponds to the standard HTML autocomplete attribute and can be set to values such as 'on', 'name', 'organization', 'street-address', etc.

Default value

"off"

Example

Set the inputPurpose property. 

 <smart-multi-combo-input input-purpose='on'></smart-multi-combo-input>

Set the inputPurpose property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.inputPurpose = 'country';

Get the inputPurpose property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let inputPurpose = multicomboinput.inputPurpose;

itemsnumber

Determines the maximum number of matched items that should be visible inside the drop down as a result of a new autoComplete query. By default the maximum number of 8 items can be displayed inside the drop down.

Default value

8

Example

Set the items property. 

 <smart-multi-combo-input items='2'></smart-multi-combo-input>

Set the items property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.items = 5;

Get the items property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let items = multicomboinput.items;

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property. 

 <smart-multi-combo-input locale='de'></smart-multi-combo-input>

Set the locale property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.locale = 'en';

Get the locale property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let locale = multicomboinput.locale;

localizeFormatFunctionfunction

Callback used to customize the format of the messages that are returned from the Localization Module.

Example

Set the localizeFormatFunction property. 

 <smart-multi-combo-input localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-multi-combo-input>

Set the localizeFormatFunction property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let localizeFormatFunction = multicomboinput.localizeFormatFunction;

messagesobject

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

"invalidNode": "{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."

}

Example

Set the messages property. 

 <smart-multi-combo-input messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","invalidNode":"{{elementType}}: Ungultiger Parameter '{{node}}' beim Aufruf von {{method}}."}}'></smart-multi-combo-input>

Set the messages property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.","invalidNode":"{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."}};

Get the messages property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let messages = multicomboinput.messages;

minLengthnumber

Determines the minimum number of characters inside the input in order to trigger the autocomplete functionality that will open the drop down and show the matched items.

Default value

1

Example

Set the minLength property. 

 <smart-multi-combo-input min-length='2'></smart-multi-combo-input>

Set the minLength property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.minLength = 0;

Get the minLength property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let minLength = multicomboinput.minLength;

namestring

Sets or gets the name attribute for the element. Name is used when submiting data inside an HTML form.

Default value

""

Example

Set the name property. 

 <smart-multi-combo-input name='dropdown'></smart-multi-combo-input>

Set the name property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.name = 'dropDown2';

Get the name property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let name = multicomboinput.name;

openedboolean

Determines whether the drop down is opened or not.

Default value

false

Example

Set the opened property. 

 <smart-multi-combo-input opened></smart-multi-combo-input>

Set the opened property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.opened = false;

Get the opened property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let opened = multicomboinput.opened;

placeholderstring

Determines the placeholder of the input.

Default value

""
Try a demo showcasing the placeholder property.

Example

Set the placeholder property. 

 <smart-multi-combo-input placeholder='Empty'></smart-multi-combo-input>

Set the placeholder property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.placeholder = 'Enter:';

Get the placeholder property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let placeholder = multicomboinput.placeholder;

pillsboolean

Enables or disables whether drop-down items are rendered as pills.

Default value

false
Try a demo showcasing the pills property.

Example

Set the pills property. 

 <smart-multi-combo-input pills></smart-multi-combo-input>

Set the pills property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.pills = false;

Get the pills property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let pills = multicomboinput.pills;

querystring | number

Sets or gets the query that is used to filter the items. Query is used by the autoComplete operation. Empty string means that all items from the data source will be displayed and no filter query is applied.

Default value

""

Example

Set the query property. 

 <smart-multi-combo-input query='ABC'></smart-multi-combo-input>

Set the query property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.query = 'some query';

Get the query property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let query = multicomboinput.query;

queryMode"contains" | "containsIgnoreCase" | "doesNotContain" | "doesNotContainIgnoreCase" | "equals" | "equalsIgnoreCase" | "startsWith" | "startsWithIgnoreCase" | "endsWith" | "endsWithIgnoreCase"

Determines the auto complete query mode. This property also determines the matching algorithm for the autocomplete operation.

Allowed Values

  • "contains" - Displays the items that contain the search query (case sensitive)
  • "containsIgnoreCase" - Displays the items that contain the search query (case insensitive)
  • "doesNotContain" - Displays the items that do not contain the search query (case sensitive)
  • "doesNotContainIgnoreCase" - Displays the items that do not contain the search query (case insensitive)
  • "equals" - Displays the items that are equal the search query (case sensitive)
  • "equalsIgnoreCase" - Displays the items that are equal the search query (case insensitive)
  • "startsWith" - Displays the items that start with the search query (case sensitive)
  • "startsWithIgnoreCase" - Displays the items that start with the search query (case insensitive)
  • "endsWith" - Displays the items that end with the search query (case sensitive)
  • "endsWithIgnoreCase" - Displays the items that start with the search query (case insensitive)

Default value

"containsIgnoreCase"

Example

Set the queryMode property. 

 <smart-multi-combo-input query-mode='contains'></smart-multi-combo-input>

Set the queryMode property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.queryMode = 'endsWith';

Get the queryMode property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let queryMode = multicomboinput.queryMode;

readonlyboolean

Determines whether ot not the user can enter text inside the input. if dropDownButtonPosition is set to 'left' or 'right' then readonly determines whether the element acts as a ComboBox or a DropDownList if a dataSource is provided.

Default value

false
Try a demo showcasing the readonly property.

Example

Set the readonly property. 

 <smart-multi-combo-input readonly></smart-multi-combo-input>

Set the readonly property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.readonly = false;

Get the readonly property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let readonly = multicomboinput.readonly;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false
Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property. 

 <smart-multi-combo-input right-to-left></smart-multi-combo-input>

Set the rightToLeft property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.rightToLeft = true;

Get the rightToLeft property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let rightToLeft = multicomboinput.rightToLeft;

separatorstring

Determines the delimiter between the tags in the input field.

Default value

""

Example

Set the separator property. 

 <smart-multi-combo-input separator='-'></smart-multi-combo-input>

Set the separator property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.separator = ',';

Get the separator property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let separator = multicomboinput.separator;

singleSelectboolean

Determines whether only a single item can be selected.

Default value

false

Example

Set the singleSelect property. 

 <smart-multi-combo-input single-select></smart-multi-combo-input>

Set the singleSelect property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.singleSelect = false;

Get the singleSelect property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let singleSelect = multicomboinput.singleSelect;

selectAllboolean

Determines whether an additional item is displayed as the first item in the options list, which allows to select/unselect all items.

Default value

false

Example

Set the selectAll property. 

 <smart-multi-combo-input select-all></smart-multi-combo-input>

Set the selectAll property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.selectAll = false;

Get the selectAll property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let selectAll = multicomboinput.selectAll;

selectedValuesarray

Gets or sets an array of selected values.

sortedboolean

Determines whether the items are sorted alphabetically or not

Default value

false

Example

Set the sorted property. 

 <smart-multi-combo-input sorted></smart-multi-combo-input>

Set the sorted property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.sorted = false;

Get the sorted property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let sorted = multicomboinput.sorted;

sortDirectionstring

Determines the sorting algorithm - ascending(asc) or descending(desc) if sort is enabled.

Default value

"asc"

Example

Set the sortDirection property. 

 <smart-multi-combo-input sort-direction='desc'></smart-multi-combo-input>

Set the sortDirection property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.sortDirection = 'asc';

Get the sortDirection property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let sortDirection = multicomboinput.sortDirection;

inputTagsMode"one" | "many"

Determines whether the input field will contain tags for each selected item from the popup or just one that shows the number of selected items.

Allowed Values

  • "one" - The input field will contain a single tag that shows the number of selected items.
  • "many" - The input field will contain tags for each selected item from the popup.

Default value

"many"

Example

Set the inputTagsMode property. 

 <smart-multi-combo-input input-tags-mode='one'></smart-multi-combo-input>

Set the inputTagsMode property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.inputTagsMode = 'many';

Get the inputTagsMode property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let inputTagsMode = multicomboinput.inputTagsMode;

themestring

Determines the theme for the element. Themes define the look of the elements.

Default value

""

Example

Set the theme property. 

 <smart-multi-combo-input theme='blue'></smart-multi-combo-input>

Set the theme property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.theme = 'red';

Get the theme property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let theme = multicomboinput.theme;

typestring

Determines the input type. Input type determines what input can be entered.

Default value

""

Example

Set the type property. 

 <smart-multi-combo-input type='number'></smart-multi-combo-input>

Set the type property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.type = 'text';

Get the type property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let type = multicomboinput.type;

unfocusableboolean

If is set to true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property. 

 <smart-multi-combo-input unfocusable></smart-multi-combo-input>

Set the unfocusable property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.unfocusable = false;

Get the unfocusable property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let unfocusable = multicomboinput.unfocusable;

valuestring

Sets or gets the value of the element.

Default value

""
Try a demo showcasing the value property.

Example

Set the value property. 

 <smart-multi-combo-input value='value1'></smart-multi-combo-input>

Set the value property by using the HTML Element's instance. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 multicomboinput.value = 'value2';

Get the value property. 

 const multicomboinput = document.querySelector('smart-multi-combo-input');
 let value = multicomboinput.value;

Events

changeCustomEvent

This event is triggered when the selection is changed.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onChange

Arguments

evCustomEvent
ev.detailObject
ev.detail.label - The label of the new selected item.
ev.detail.oldLabel - The label of the item that was previously selected before the event was triggered.
ev.detail.oldValue - The value of the item that was previously selected before the event was triggered.
ev.detail.value - The value of the new selected item.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of change event. 

const multicomboinput = document.querySelector('smart-multi-combo-input');
multicomboinput.addEventListener('change', function (event) {
    const detail = event.detail,
        label = detail.label,
        oldLabel = detail.oldLabel,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

Methods

close(): void

Closes the drop down.


Invoke the close method.

const multicomboinput = document.querySelector('smart-multi-combo-input');
multicomboinput.close();

Try a demo showcasing the close method.

ensureVisible(): void

Ensures that the active ( selected ) item is always visible.


Invoke the ensureVisible method.

const multicomboinput = document.querySelector('smart-multi-combo-input');
multicomboinput.ensureVisible();

open(): void

Opens the drop down.


Invoke the open method.

const multicomboinput = document.querySelector('smart-multi-combo-input');
multicomboinput.open();

Try a demo showcasing the open method.

select(): void

Selects the text inside the input or if it is readonly then the element is focused.


Invoke the select method.

const multicomboinput = document.querySelector('smart-multi-combo-input');
multicomboinput.select();