Combobox framework documentation

Link in from CDN

<script type="module" src="https://unpkg.com/combobox-framework"></script>

Install from npm

Install the combobox-framework from npm

npm install combobox-framework

Import the combobox-framework into your project

import 'combobox-framework';

Simple list

To use the combobox-framework, you need to add a input element and a list of items. The input element needs to be placed in a slot="input" attribute and the list of items needs to be placed in a slot="list" attribute.

The li elements needs to have a data-value attribute. This is the value that will be set on the combobox-framework element as the data-value when a option is selected.

Simple list with custom display data

To show diffrent data in the input than in the list, you need to add the data-display attribute to the li element. This is the value that will be shown in the input when a option is selected.

List with nested elements

To use nested elements, you need to add the data-display attribute to the li element. This is the value that will be shown in the input when a option is selected.

Tabular data

To use tabular data, you need to add the data-list attribute to the tbody element. This will tell the combobox-framework to use the tbody element as the list of items and not the table itself.

Preselected option

To preselect a option, you need to add the data-value attribute to the combobox-framework element. This will tell the combobox-framework to select the option with the matching data-value attribute.

Custom Fuse/Fuzzy search options

To use custom fuse/fuzzy search options, you need to add the data-fuse-options attribute to the combobox-framework element, and pass in a JSON string of the settings object. This will tell the combobox-framework to use the custom options when searching for a option.

For what options are available, see the Fuse.js documentation

Force value/Listbox

To force the combobox-framework to act as a searchable listbox, you need to add the data-listbox attribute to the combobox-framework element. This will tell the combobox-framework to act as a searchable listbox instead of a combobox. And only allow the value to be one of the options in the list or null.

Limit suggested options

To limit the number of suggested options, you need to add the data-limit attribute to the combobox-framework element. This will tell the combobox-framework to only show the number of options specified in the data-limit attribute.

Weighted item search

To use weighted item search, you need to add the data-weight attribute to the li element. This is the value that will be used to sort the options when searching for a option.

NOTE: Fuse options must have includeScore set to true for weighted search to work. includeScore is true by default, if you have not set custom fuse options.

NOTE: The data-weight attribute is a number, and the higher the number the higher the weight.

Change events

To add a change event, you need to add the onchange attribute to the combobox-framework element. This will tell the combobox-framework to run the function when the value of the combobox changes.