choosy-js

choosy-js is a Custom Dropdown component for Javascript.

Check an example here

Installation

npm i choosy-js

Usage

Import the module

import Choosy from 'choosy-js';

Create a new instance with the target ID selector

const choosyDropDown = new Choosy('[target-id]');

[target-id] is the parent element's ID where Choosy will be injected into.

Call the module's render method with a given options data

choosyDropDown.render({
    options: '[options-data]'
});

[options-data] is mondatory and it matches the JSON data needed to set the Choosy options list.

Choosy is expecting id and label as default properties for the JSON object. Nonetheless, you can define your custom properties in order to match your object, e.g.:

choosyDropDown.render({
    ...
    properties: ['key', 'value'],
});

In case you want to have an initial value to be selected by default by Choosy, you just need to define initialValue property to the render method and pass your value.

choosyDropDown.render({
    ...
    initialValue: '[initial-value]',
});