Author: | marcellosurdi |
---|---|
Views Total: | 14 views |
Official Page: | Go to website |
Last Update: | March 26, 2023 |
License: | MIT |
Preview:

Description:
A lightweight yet customizable combobox web component that features synchronization, live filtering, custom icons, and more.
How to use it:
1. Import the necessary JavaScript and CSS files into the document.
<link href="./css/combobox-component.min.css" rel="stylesheet" /> <script src="./js/combobox-component.min.js"></script>
2. Wrap your input field into the combobox-container.
<div class="combobox-container"> <label for="example">Select an option</label> <input type="text" id="example" placeholder="Enter a value..."> </div>
3. Prepare your data for the combobox.
const data = [ { id: "01", name: "Item 1", descr: "Description 1", icon: 'icon class here', }, { id: "02", name: "Item 2", descr: "Description 2", icon: 'icon class here', }, { id: "03", name: "Item 3", descr: "Description 3", icon: 'icon class here', }, // ... ]
4. Initialize the combobox.
new ComboBoxComponent.ComboBox( 'example', { items: data, });
5. Available options and callbacks.
- onSelect: fired when user select an item from the list
- onFilter: fired when the list is created/updated
- onFetch: transform items retrieved from remote endpoint
- endpoint: Remote endpoint
- highlight_color: Background color for highlighted items (any CSS value)
Changelog:
v1.0.7 (05/26/2023)
- Update