Advanced forms
Combo Box
The ComboBox JavaScript plugin improves user experience by dynamically suggesting options as users type into an input field.
Basic example
HTML example
The code snippet outlines a ComboBox with specific `data` attributes to manage its behavior. The outer `<div>` with `data-combo-box` signifies that this section is the main ComboBox component. Within it, an `<input>` field with `data-combo-box-input` allows users to type text to get suggestions.
JSON example
A JSON-based ComboBox example.
JSON Example (based on API pathes)
A JSON-configured ComboBox that retrieves options from an API. `apiSearchPath` specifies the API endpoint for searching items. `apiSearchDefaultPath` sets the default API endpoint to load all items initially.
Option usage
Search and limit parameters
`:apiSearchQuery` serves as a property or parameter containing the key name utilized for searching within a dataset when making API calls. Usually, it's combined with user-entered text to generate a query string, which is then appended to the base API endpoint (`apiUrl`), resulting in the complete URL required to fetch the data.
Minimum search Length
Set `"minSearchLength": 2` to define the minimum number of characters required before initiating a search.
Open on focus
When `isOpenOnFocus` is enabled, the dropdown menu will automatically appear upon focusing on the input field.
Close Button
A basic usage of ComboBox with close button.
SearchBox
Html example — Dropdown
Combo box html example with dropdown and modal.
Html example — Modal
A combo box displaying HTML content within a modal.
Press Shift + K for SearchBox.
Json example — Dropdown
Combo box example using JSON data displayed within a dropdown and a modal.
Json example — Modal
Combo box with json data show in modal.
Press Shift + t for SearchBox.
Json with tab filter — Dropdown
Combo box example demonstrating tab filtering functionality, incorporating both dropdown and modal components.
Json with tab filter — Modal
In this example, a modal popup is employed to provide a user-friendly tab filtering experience.
Press Shift + J for SearchBox.
Illustrations
Destroy/Reinitialize
The `destroy` <a href="#destroy-method" class="link link-primary">method</a> is provided to facilitate the destruction of a toggle count.
JavaScript behavior
Methods — Method usage
The `HSCombobox` object is contained within the global `window` object.
JavaScript
const { element } = HSComboBox.getInstance('#combo-box-to-destroy', true);
const destroyBtn = document.querySelector('#destroy-btn');
destroyBtn.addEventListener('click', () => {
element.destroy();
});Events — Event usage
METHOD| DESCRIPTION | RETURNING VALUE `on:select`| Called when any select is changed. | Current value
JavaScript
const {element} = HSComboBox.getInstance('#event-select', true);
element.on('select', (value) => {console.log("element.value")});Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
dropdown-item | modifier | Styles applied to individual dropdown items. |
combo-box-active:{tw-utility-class} | variant | Modifies tailwind classes when the combo box is active. |
combo-box-selected:{tw-utility-class} | variant | Modifies tailwind classes when the combo box is selected. |
combo-box-tab-active:{tw-utility-class} | variant | Modifies tailwind classes when the combo box tab is active. |
combo-box-has-value:{tw-utility-class} | variant | A modifier that enables you to apply Tailwind classes when the SearchBox's input field contains a value. |