ComboBox Javascript API

itemTemplateany

The itemTemplate property is a string that specifies the ID of an HTMLTemplateElement present in the DOM. This template is used to define and customize the structure and content of individual list items, allowing developers to control how each item appears when rendered in the list.

 <smart-combo-box item-template=''templateA''></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.itemTemplate = 'templateB';

 const combobox = document.querySelector('smart-combo-box');

 let itemTemplate = combobox.itemTemplate;

labelstring

Displays a small text label positioned above the element, typically used to provide context, instructions, or additional information to users.

 <smart-combo-box label='Helper text'></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.label = 'Label';

 const combobox = document.querySelector('smart-combo-box');

 let label = combobox.label;

loadingIndicatorPlaceholderstring

Specifies the text that appears alongside the loading indicator when the loader is visible and positioned at the top or bottom of the component. This text provides users with contextual information or status updates during loading.

 <smart-combo-box loading-indicator-placeholder='Incoming data'></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.loadingIndicatorPlaceholder = 'LOADING...';

 const combobox = document.querySelector('smart-combo-box');

 let loadingIndicatorPlaceholder = combobox.loadingIndicatorPlaceholder;

loadingIndicatorPosition"bottom" | "center" | "top"

Specifies the exact location on the user interface where the loading indicator will be displayed, such as at the top, center, or bottom of the screen or component.

Allowed Values

• "bottom" - Positions the loading indicator at the bottom of the list.
• "center" - Positions the loading indicator at the center of the list.
• "top" - Positions the loading indicator at the bottom of the list.

 <smart-combo-box loading-indicator-position='bottom'></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.loadingIndicatorPosition = 'top';

 const combobox = document.querySelector('smart-combo-box');

 let loadingIndicatorPosition = combobox.loadingIndicatorPosition;

unlockKeystring

Sets or retrieves the unlockKey, a unique value required to grant access to the product’s premium features or activate its full functionality.

 <smart-combo-box unlock-key=''></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.unlockKey = '1111-2222-3333-4444-5555';

 const combobox = document.querySelector('smart-combo-box');

 let unlockKey = combobox.unlockKey;

localestring

Specifies or retrieves the current language setting for the component. This property determines which language is used when displaying content from the messages property, allowing for localization and internationalization of displayed messages. Set this property to a supported language code (e.g., "en", "fr") to load the corresponding translations from the messages object.

 <smart-combo-box locale='de'></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.locale = 'en';

 const combobox = document.querySelector('smart-combo-box');

 let locale = combobox.locale;

localizeFormatFunctionfunction | null

A callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this callback to modify message text, apply dynamic values, or implement custom formatting logic before the localized messages are delivered to your application.

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

 const combobox = document.querySelector('smart-combo-box');

 combobox.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

 const combobox = document.querySelector('smart-combo-box');

 let localizeFormatFunction = combobox.localizeFormatFunction;

messagesobject

Specifies or retrieves an object containing localized string values used within the widget’s user interface. This property enables the customization and translation of UI text for different languages or regions. It is intended to be used together with the locale property, allowing you to easily provide or update localized strings according to the selected locale.

 <smart-combo-box 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-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.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}}."}};

 const combobox = document.querySelector('smart-combo-box');

 let messages = combobox.messages;

minLengthnumber

Specifies the minimum number of characters a user must enter in the input field before the autocomplete feature is activated and suggestions are displayed.

 <smart-combo-box min-length='3'></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.minLength = 4;

 const combobox = document.querySelector('smart-combo-box');

 let minLength = combobox.minLength;

maxLengthnumber

Specifies the maximum number of characters that can be entered into the input field. Any additional characters beyond this limit will not be accepted. This helps enforce data validation and consistency for user input.

 <smart-combo-box max-length='3'></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.maxLength = 4;

 const combobox = document.querySelector('smart-combo-box');

 let maxLength = combobox.maxLength;

namestring

Sets or retrieves the value of the element's name attribute. The name attribute uniquely identifies form elements when submitting HTML forms, allowing the form data to be organized and accessed by name on the server side. This attribute is essential for grouping form controls and accurately transmitting user input during form submission.

 <smart-combo-box name='combobox'></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.name = 'comboBox2';

 const combobox = document.querySelector('smart-combo-box');

 let name = combobox.name;

openedboolean

Specifies whether the popup is currently visible (open) or hidden (closed) in the user interface.

 <smart-combo-box opened></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.opened = false;

 const combobox = document.querySelector('smart-combo-box');

 let opened = combobox.opened;

placeholderstring

Specifies the placeholder text that appears inside the input field when it is empty, providing guidance or example content to the user.

 <smart-combo-box placeholder='Choose:'></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.placeholder = 'Submit';

 const combobox = document.querySelector('smart-combo-box');

 let placeholder = combobox.placeholder;

readonlyboolean

Prevents any user interactions with the element, including clicking, tapping, selecting, hovering, or focusing. While this is enabled, the element will not respond to mouse, keyboard, or touch events, effectively making it non-interactive for users.

 <smart-combo-box readonly></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.readonly = false;

 const combobox = document.querySelector('smart-combo-box');

 let readonly = combobox.readonly;

rightToLeftboolean

Specifies or retrieves a value that determines whether the element’s text direction is set to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element and its content are aligned according to RTL formatting, ensuring proper display for locales that use right-to-left scripts.

 <smart-combo-box right-to-left></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.rightToLeft = true;

 const combobox = document.querySelector('smart-combo-box');

 let rightToLeft = combobox.rightToLeft;

resizeIndicatorboolean

Controls the visibility of the resize indicator located in the bottom-right corner of the dropdown component. When this property is set to true, users will see a handle allowing them to resize the dropdown area. This property should be used together with the resizeMode property to define both the availability and behavior of the resizing feature.

 <smart-combo-box resize-indicator></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.resizeIndicator = false;

 const combobox = document.querySelector('smart-combo-box');

 let resizeIndicator = combobox.resizeIndicator;

resizeMode"none" | "horizontal" | "vertical" | "both"

Specifies whether the drop-down menu is resizable by the user. If resizing is enabled, a resize bar will be displayed along the top or bottom edge of the drop-down, allowing users to click and drag to adjust its height. Disabling this option removes the resize bar and prevents any manual resizing of the drop-down component.

Allowed Values

• "none" - Resizing the drop down is not allowed.
• "horizontal" - Horizontal resizing of the drop down is allowed but not vertical.
• "vertical" - Vertical resizing of the drop down is allowed but not horizontal.
• "both" - Resizing the drop down is allowed in all directions.

 <smart-combo-box resize-mode='horizontal'></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.resizeMode = 'vertical';

 const combobox = document.querySelector('smart-combo-box');

 let resizeMode = combobox.resizeMode;

selectionDisplayMode"plain" | "placeholder" | "tokens"

Specifies the content or value that will appear within the input field, either as a default value, user-entered data, or dynamically generated content. This setting controls what the user sees and interacts with inside the input element.

Allowed Values

• "plain" - Default behavior. The selected item's label appears in the input of the element.
• "placeholder" - The placeholder of the input is always shown regardless of the current selection.
• "tokens" - Token items are being appended to input field for each selected item. Tokens are used for multiple selection modes. When a token's label is clicked the drop down opens and the corresponding item will be focused.

 <smart-combo-box selection-display-mode='placeholder'></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.selectionDisplayMode = 'default';

 const combobox = document.querySelector('smart-combo-box');

 let selectionDisplayMode = combobox.selectionDisplayMode;

selectedIndexesnumber[]

Sets or retrieves the selected indexes. The selected indexes property is an array containing the numeric indexes of the items that are currently selected. Each value in the array corresponds to the position of a selected item within the overall list or collection. Assigning a new array to this property updates the selection state to match the specified indexes; retrieving it returns the current selection as an array of indexes.

 <smart-combo-box selected-indexes='[1,2,3]'></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.selectedIndexes = [4,5,6];

 const combobox = document.querySelector('smart-combo-box');

 let selectedIndexes = combobox.selectedIndexes;

selectedValuesstring[]

"Sets or retrieves the currently selected indexes. The 'selected' property holds an array of the indices corresponding to the items that are marked as selected. When setting this property, provide an array of indexes to specify which items should be selected. When getting this property, it returns the array of indexes for the currently selected items."

 <smart-combo-box selected-values='["item 1"]'></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.selectedValues = ["item 2"];

 const combobox = document.querySelector('smart-combo-box');

 let selectedValues = combobox.selectedValues;

selectionMode"none" | "oneOrManyExtended" | "zeroOrMany" | "oneOrMany" | "zeroAndOne" | "zeroOrOne" | "one" | "checkBox" | "radioButton"

Specifies the maximum number of items that a user is allowed to select at one time. If this value is set to 1, only single selection is permitted; higher values allow multiple selections up to the defined limit.

Allowed Values

• "none" - Item selection is not allowed.
• "oneOrManyExtended" - Only one item can be selected unless when pressing the Shift or Control keys of the keyboard more then one item can be selected. Shift key allows to select a range of items while Control allows to select/unselect speciic items. There is always at least one selected item
• "zeroOrMany" - Zero or many items can be selected.
• "oneOrMany" - One or more items must be selected. There is always at least one selected item
• "zeroAndOne" - Only one item can optionally be selected.
• "zeroOrOne" - Zero or one item can be selected.
• "one" - Only one item can be selected. There is always at least one selected item
• "checkBox" - A Check box appears next to every List item inside the drop down. One, many or zero items can be selected.
• "radioButton" - A radio button appears next to every List item inside the drop down. Only one item can be selected or one item per group if grouped is enabled.

 <smart-combo-box selection-mode='zeroOrMany'></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.selectionMode = 'oneOrMany';

 const combobox = document.querySelector('smart-combo-box');

 let selectionMode = combobox.selectionMode;

sortedboolean

Specifies whether the items are arranged in alphabetical order. If set to true, the items will be sorted alphabetically; if false, the original order will be preserved.

 <smart-combo-box sorted></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.sorted = false;

 const combobox = document.querySelector('smart-combo-box');

 let sorted = combobox.sorted;

sortDirectionstring

Specifies the sorting order for data, allowing you to choose between ascending ("asc") for lowest-to-highest or alphabetical A–Z sorting, and descending ("desc") for highest-to-lowest or Z–A sorting.

 <smart-combo-box sort-direction='desc'></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.sortDirection = 'asc';

 const combobox = document.querySelector('smart-combo-box');

 let sortDirection = combobox.sortDirection;

themestring

Specifies the visual theme to be applied to the element. The selected theme controls the element’s appearance, including colors, fonts, and other stylistic properties, ensuring a consistent look and feel across the user interface.

 <smart-combo-box theme='blue'></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.theme = 'red';

 const combobox = document.querySelector('smart-combo-box');

 let theme = combobox.theme;

tokenTemplateany

Defines the custom content to display within each token when the selectionDisplayMode is set to "tokens". Tokens visually represent selected items in a multi-select interface and are only applicable when multiple selection is enabled. Use this option to customize how each token appears, such as displaying specific text, icons, or additional data for each selected item.

 <smart-combo-box token-template='tokenTemplate'></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.tokenTemplate = null;

 const combobox = document.querySelector('smart-combo-box');

 let tokenTemplate = combobox.tokenTemplate;

unfocusableboolean

If set to true, the element will not be able to receive keyboard or mouse focus, making it inaccessible via tab navigation or programmatic focus methods.

 <smart-combo-box unfocusable></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.unfocusable = false;

 const combobox = document.querySelector('smart-combo-box');

 let unfocusable = combobox.unfocusable;

valuestring

Provides functionality to retrieve (get) or assign (set) the current value of the property. When used as a getter, it returns the property's current value. When used as a setter, it updates the property with the specified value.

 <smart-combo-box value='val1'></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.value = 'val2';

 const combobox = document.querySelector('smart-combo-box');

 let value = combobox.value;

valueMemberstring

Specifies which property of each item object should be used as the value for that item. The value designated by valueMember will be stored in the item's value field. This property functions similarly to groupMember, but is focused on identifying the value rather than the group. valueMember is particularly useful when populating a ListBox from a JSON data source, as it allows you to specify which property of your data objects should serve as the unique value for each item in the ListBox.

 <smart-combo-box value-member='value'></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.valueMember = 'newValue';

 const combobox = document.querySelector('smart-combo-box');

 let valueMember = combobox.valueMember;

verticalScrollBarVisibility"auto" | "disabled" | "hidden" | "visible"

Controls whether the vertical scroll bar is displayed within the content area, allowing users to scroll vertically when the content extends beyond the visible region.

Allowed Values

• "auto" - The element automatically determines whether or not the horizontal scroll bar should be visible or not.
• "disabled" - Disables the horizontal scroll bar.
• "hidden" - Hides the horizontal scroll bar.
• "visible" - Shows the horizontal scroll bar even if not necessary.

 <smart-combo-box vertical-scroll-bar-visibility='hidden'></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.verticalScrollBarVisibility = 'visible';

 const combobox = document.querySelector('smart-combo-box');

 let verticalScrollBarVisibility = combobox.verticalScrollBarVisibility;

virtualizedboolean

Determines whether virtualization is enabled for the ComboBox. When virtualization is enabled, the ComboBox can efficiently display a very large number of items—such as a million—by only rendering the visible items in the ListBox and dynamically loading items as needed. This significantly improves performance and reduces memory usage, especially with large data sets.

 <smart-combo-box virtualized></smart-combo-box>

 const combobox = document.querySelector('smart-combo-box');

 combobox.virtualized = false;

 const combobox = document.querySelector('smart-combo-box');

 let virtualized = combobox.virtualized;

Events

changeCustomEvent

This event is triggered whenever the user changes the current selection, such as highlighting different text or selecting a new item in a list. It allows you to detect and respond to updates in the selected content or options within the interface.

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

Arguments

const combobox = document.querySelector('smart-combo-box');
combobox.addEventListener('change', function (event) {
    const detail = event.detail,
        addedItems = detail.addedItems,
        disabled = detail.disabled,
        index = detail.index,
        label = detail.label,
        removedItems = detail.removedItems,
        selected = detail.selected,
        value = detail.value;

	// event handling code goes here.
})

closeCustomEvent

This event is triggered when the drop-down list is closed, either by the user selecting an option or by clicking outside the menu. It occurs after the drop-down menu is no longer visible, allowing you to perform actions in response to the menu's closure.

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

Arguments

const combobox = document.querySelector('smart-combo-box');
combobox.addEventListener('close', function (event) {
	// event handling code goes here.
})

closingCustomEvent

This event is triggered right before the dropdown list is about to close, providing an opportunity to intervene. By calling event.preventDefault() within the event handler, you can cancel the closing operation, allowing you to perform validation, display a confirmation dialog, or execute custom logic before the dropdown is closed.

• Bubbles Yes
• Cancelable Yes
• Interface CustomEvent
• Event handler property onClosing

Arguments

const combobox = document.querySelector('smart-combo-box');
combobox.addEventListener('closing', function (event) {
	// event handling code goes here.
})

itemClickCustomEvent

This event is triggered whenever a user clicks on a specific item, allowing you to execute custom actions in response to the user's selection. The event provides context about the clicked item, enabling you to access its properties or perform related updates within your application.

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

Arguments

const combobox = document.querySelector('smart-combo-box');
combobox.addEventListener('itemClick', function (event) {
    const detail = event.detail,
        disabled = detail.disabled,
        index = detail.index,
        label = detail.label,
        selected = detail.selected,
        value = detail.value;

	// event handling code goes here.
})

openCustomEvent

This event is triggered whenever the dropdown list becomes visible to the user, such as when the user clicks or interacts with the control to expand and display the list of available options. Use this event to execute custom logic when the dropdown menu is opened.

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

Arguments

const combobox = document.querySelector('smart-combo-box');
combobox.addEventListener('open', function (event) {
	// event handling code goes here.
})

openingCustomEvent

This event is triggered immediately before the dropdown list is displayed to the user. Within the event handler, you can prevent the dropdown from opening by calling event.preventDefault(). This allows you to implement custom logic to conditionally allow or block the opening of the dropdown, such as validating conditions or managing user permissions before the list is shown.

• Bubbles Yes
• Cancelable Yes
• Interface CustomEvent
• Event handler property onOpening

Arguments

const combobox = document.querySelector('smart-combo-box');
combobox.addEventListener('opening', function (event) {
	// event handling code goes here.
})

resizeStartCustomEvent

This event is triggered when the user initiates the resizing action on the dropdown component, such as clicking and dragging a resize handle. It allows developers to detect the exact moment when a resize operation on the dropdown begins.

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

Arguments

const combobox = document.querySelector('smart-combo-box');
combobox.addEventListener('resizeStart', function (event) {
    const detail = event.detail,
        position = detail.position;

	// event handling code goes here.
})

resizeEndCustomEvent

This event is triggered after the user has completed resizing the dropdown menu, signaling that the resizing action has ended and the new dimensions have been set.

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

Arguments

const combobox = document.querySelector('smart-combo-box');
combobox.addEventListener('resizeEnd', function (event) {
    const detail = event.detail,
        position = detail.position;

	// event handling code goes here.
})

scrollBottomReachedCustomEvent

This event is triggered when the user scrolls to the bottom of the dropdown list, indicating that all available options have been displayed. It can be used to detect when additional data should be loaded or when no further options remain in the dropdown.

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

Arguments

const combobox = document.querySelector('smart-combo-box');
combobox.addEventListener('scrollBottomReached', function (event) {
	// event handling code goes here.
})

scrollTopReachedCustomEvent

This event is triggered when the user scrolls to the very beginning (top) of the dropdown list, indicating that no more items are available above the current view.

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

Arguments

const combobox = document.querySelector('smart-combo-box');
combobox.addEventListener('scrollTopReached', function (event) {
	// event handling code goes here.
})

tokenClickCustomEvent

This event is triggered when a token item (also known as a 'pill') is clicked by the user. By handling this event, developers have the opportunity to intercept the default action that would normally occur when the token is clicked—such as opening a dropdown or performing another related operation. To prevent the default behavior from executing, call event.preventDefault() within your event handler function."

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

Arguments

const combobox = document.querySelector('smart-combo-box');
combobox.addEventListener('tokenClick', function (event) {
	// event handling code goes here.
})

Methods

appendChild( node: Node): T

Arguments

nodeNode

A ListItem element that should be added to the rest of the items as the last item.

ReturnsNode

add( item: any): void

Creates and appends one or more new items to the collection or list.

Arguments

itemany

Describes the properties of the item that will be inserted. You can also pass an array of items.

const combobox = document.querySelector('smart-combo-box');
combobox.add("'New item'");

clearItems(): void

Removes all existing items from the dropdown list, resulting in an empty list with no selectable options displayed to the user.

const combobox = document.querySelector('smart-combo-box');
combobox.clearItems();

clearSelection(): void

Deselects all currently selected items, ensuring that no items remain selected. This action clears any existing selections and resets the selection state.

const combobox = document.querySelector('smart-combo-box');
combobox.clearSelection();

close(): void

Closes the currently open drop-down list, hiding all available options from view and returning the component to its collapsed state. This action ensures that the drop-down menu is no longer visible to the user.

const combobox = document.querySelector('smart-combo-box');
combobox.close();

dataBind(): void

Initiates a data binding process, connecting UI components to the underlying data source. This method refreshes the data source, ensuring that any changes made to the data are reflected in the user interface. It can be used to update displayed information after modifying, adding, or deleting data.

const combobox = document.querySelector('smart-combo-box');
combobox.dataBind();

ensureVisible( item: HTMLElement | string): void

Scrolls the target item into view within its container, automatically adjusting the scroll position as needed to make sure the entire item is fully visible to the user.

Arguments

itemHTMLElement | string

A list item or value of the desired item to be visible.

const combobox = document.querySelector('smart-combo-box');
combobox.ensureVisible("'item1'");

getItem( value: string): HTMLElement

Returns a specific item instance from the dropDown list, allowing you to access the properties and methods of the selected list item. This can be used to retrieve information about the item, such as its value, label, or index within the dropDown.

Arguments

valuestring

The value of an item from the drop down list.

ReturnsHTMLElement

const combobox = document.querySelector('smart-combo-box');
const result = combobox.getItem("First");

insert( position: number, item: any): void

Inserts a new item into the array at the specified index position, shifting existing elements to the right to accommodate the new item.

Arguments

positionnumber

The position where the item must be inserted.

itemany

Describes the properties of the item that will be inserted. You can also pass an array of items.

const combobox = document.querySelector('smart-combo-box');
combobox.insert(5,"'New item'");

insertBefore( node: Node, referenceNode: Node | null): T

Arguments

nodeNode

A ListItem element that should be added before the referenceItem in the list.

referenceNodeNode | null

A ListItem element that acts as the reference item before which a new item is about to be inserted. The referenceNode must be in the same list as the node.

ReturnsNode

open(): void

Displays and expands the drop-down list, making all available options visible for selection.

const combobox = document.querySelector('smart-combo-box');
combobox.open();

removeAt( position: number): void

Removes the item located at the specified index or position within a collection (such as an array or list). After removal, the collection is updated so that subsequent items shift to fill the gap, ensuring contiguous indexing.

Arguments

positionnumber

The position of the removed item.

const combobox = document.querySelector('smart-combo-box');
combobox.removeAt(5);

removeChild( node: Node): T

Arguments

nodeNode

A ListItem element that is part of the list of items inside the element.

ReturnsNode

select( item: string | HTMLElement): void

Selects a specified item from the dropdown list, allowing users to choose one option from the available choices. This action updates the dropdown’s current selection and can trigger any associated event handlers or changes in the application’s state.

Arguments

itemstring | HTMLElement

A string, representing the value of the item or an HTML Element referencing an item from the list

const combobox = document.querySelector('smart-combo-box');
combobox.select("'First Item'");

unselect( item: string | HTMLElement): void

Deselects a specified item from the dropdown list, removing its selected state and reverting the dropdown to reflect that the item is no longer chosen by the user.

Arguments

itemstring | HTMLElement

A string, representing the value of the item or an HTML Element referencing an item from the list

const combobox = document.querySelector('smart-combo-box');
combobox.unselect("'First Item'");

update( position: number, value: any): void

Updates the selected item in the dropDown list with new data or attributes. This action modifies the existing item rather than adding or removing items from the list, ensuring that any changes are reflected immediately in the user interface. Specify the target item and the updated values to complete the operation.

Arguments

positionnumber

The position where the item must be updated.

valueany

The value of the updated item.

const combobox = document.querySelector('smart-combo-box');
combobox.update(5,"'Updated item'");

CSS Variables

--smart-combo-box-default-widthvar()

smartComboBox default width

--smart-combo-box-default-heightvar()

smartComboBox default height

--smart-combo-box-drop-down-widthvar()

smartComboBox default width

--smart-combo-box-drop-down-heightvar()

smartComboBox default height