Class USAComboBox

The USAComboBox component is used to initialize the .usa-combo-box component.

The combo box is a combination of two different user interface elements, an HTMLSelectElement for capturing options, and an HTMLInputElement that allows users to filter the options.

Default options

There are no options for USAComboBox.

Initialization examples

The easiest way to user the combo box is to let the NCIDS automatically initialize your combo box HTML.

Add the following to the top of your main Javascript file, and it will add trigger the Javascript initialization of the USAComboBox.

Example

import '@nciocpl/ncids-js/usa-combo-box/auto-init';
Copy

If you need access to the combo box instance to further customize your site, you can manually initialize the combo box:

Example

import { USAComboBox } from '@nciocpl/ncids-js/usa-combo-box';

// Find the combo box HTML element.
const comboBoxEl = document.querySelector('.usa-combo-box');

// Initialize the component.
const comboBox = USAComboBox.create(comboBoxEl);
Copy

HTML Events

The combo box component will dispatch the following CustomEvent types that can be used to track analytics or other needs when a visitor interacts with the combo box:

• usa-combo-box:input:text-change - Dispatched with ComboBoxTextChangeEventDetails when the input value changes.
• usa-combo-box:input:text-cleared - Dispatched with ComboBoxTextChangeEventDetails when the input value is cleared without a new selection being made.
• usa-combo-box:listbox:expanded - Dispatched with ComboBoxExpandedEventDetails when the listbox is opened.
• usa-combo-box:listbox:collapsed - Dispatched with ComboBoxCollapsedEventDetails when the listbox is closed.
• usa-combo-box:listbox:no-results - Dispatched with ComboBoxNoResultsEventDetails when the listbox shows the 'No Results Found' text.
• usa-combo-box:selected - Dispatched with ComboBoxSelectedEventDetails when the user has selected an option from the listbox.
• usa-combo-box:unselected - Dispatched with ComboBoxClearedEventDetails when the selected option is unselected.

Example

import { USAComboBox } from '@nciocpl/ncids-js/usa-combo-box';

// Find the combo box HTML element.
const comboBoxEl = document.querySelector('.usa-combo-box');

// Initialize the component.
const comboBox = USAComboBox.create(comboBoxEl);

// Attach an event handler to the combo box to listen for custom events.
comboBox.addEventListener('usa-combo-box:cleared', (event) => {
   // Add your analytics code here.
   console.log('Event occurred.');
});
Copy