Searchable select

Custom searchable select

Package@schukai/component-form
Importimport {Select} from "https://cdn.jsdelivr.net/npm/@schukai/[email protected]/dist/modules/select.js";

Usage

Select component allows user to pick any amount of option from the given data:


// create element
const select = document.createElement('monster-select');

// set multiselect
select.setOption('type', 'checkbox');

// set options
select.setOption('options', [
        {value: 'en', label: 'United Kingdom <img width=20
                                           src="https://raw.githubusercontent.com/lipis/flag-icon-css/master/flags/4x3/gb.svg">'},
        {value: 'se', label: 'Sverige <img width=20
                                           src="https://raw.githubusercontent.com/lipis/flag-icon-css/master/flags/4x3/se.svg">'},
        {value: 'de', label: 'Deutschland <img width=20
                                               src="https://raw.githubusercontent.com/lipis/flag-icon-css/master/flags/4x3/de.svg">'}
    ]);

// insert element into the DOM
document.getElementById('body').appendChild(select);

Single select

Radios are used for the single selection.


select.setOption('type', 'radio');

Multiselect

Checkboxes are used for multiple selection.


select.setOption('type', 'checkbox');

Import data

The options can be imported from an object. The object can be read in either directly via Select.importOptions() or indirectly via a URL.

In the example, a json file is imported via https://monsterjs.org/assets/world.json.


select.setOption('url','https://monsterjs.org/assets/world.json')

Alternatively, the data can also be imported from an object.


select.importOptions([
    {
        "name": "United Kingdom",
        "alpha-2": "GB",
        "country-code": "826",
    },
    {
        "name": "Sweden",
        "alpha-2": "SE",
        "country-code": "752",

    },
    {
        "name": "Germany",
        "alpha-2": "DE",
        "country-code": "276",
    }
]);

The mapping of the data to the options is done using the values defined in the mappings key.


select.setOption('mapping.labelTemplate', '${name} (${alpha-2})')
select.setOption('mapping.valueTemplate', '${country-code}')

If you want to specify a deeper structure, you can do so via selector.



{
    a: {
        b: {
            c: [
                ....
            ]
        }
    }
}

select.setOption('mapping.selector', 'a.b.c')

It is also possible to filter values. This is done via the filter parameter. Further details on the structure of the map can be found in the Monster documentation. There is also an example.


select.setOption('mapping.filter',  function (value, key) {
               return (value['id'] >= 20) ? true : false
           })

Events

The following events are fired by the component.

Layout

The select control can be customized to your own needs. For this purpose, the control can be designed via css.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.


monster-select::part(popper) {
    background-color: white;
}

The individual parts are shown in the following picture.