Lightweight Combobox Web Component

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