JS Select

Pure JavaScript (VanillaJS) dropdown menu, with multiple select and searching support

How to use

To use the select plugins, two main file must be included. The stylesheet:

<link rel="stylesheet" href="/js-select/dist/css/select.min.css" />

And the script file (inclusive of all language files)

<script src="/js-select/dist/select.min.js"></script>

The component must follow this structure

<select data-replace="jselect" data-locale="en" data-search="true" data-multiple="false" data-placeholder="Choose">
    <optgroup label="Group 1">
        <option value="loremIpsum" data-img="/path/to/img" data-desc="Lorem ipsum">Lorem ipsum</option>
        <!-- other options -->
    </optgroup>
    <option value="single" data-img="/path/to/img" data-desc="Single">Single</option>
    <!-- other options -->
</select>

Referencing

Once a JSelect has been istantiated, it can be references through the global window.JSELECT_INSTANCES. It is a key-value dictionary, so structured:

• the key is the JSelect INSTANCE's name. It's the value of the name attribute in the <select> tag, or, if that attribute was empty or not provided, the UNIX timestamp at the time the JSelect was istantiated.

• the value is the JSelect object.

For example, a JSelect with name = regions, can be referenced through:

var regionsSelect = window.JSELECT_INSTANCES["regions"];

Options

Options for the select tag:

Options for the option tag:

Keyboard shortcuts

If focus isn't on the component, then the Enter key will show the menu. Once it's open, the following shortcuts can be used:

Events

Plugin provides custom events to intercept changes either in structure or in value.

Languages

At the time I'm writing this document, there are only Italian (it) and English (en) available.
I don't use automatic translators. I prefer filling only languages that I know.
Other translation can be easily added in the /src/locales.js file.
Remeber to use the correct ISO two-letter code. See here