EJS Multiselect

EJS Multiselect is a Javascript library that provides a simple and easy-to-use multiselect dropdown list. It provides excellent functionalities such as the ability to select multiple options at once, search for specific options, and add new options, among others.

Features

• Easy-to-use API that allows customization of the dropdown list
• Ability to select multiple options
• Search for specific options
• Add new options
• Support for keyboard shortcuts
• Lightweight and fast

Getting Started

To start using EJS Multiselect, follow these simple steps:

1. Download and include the ejs-multiselect.min.css and ejs-multiselect.min.js files in your HTML file:

<link rel="stylesheet" href="path/to/ejs-multiselect.min.css">
<script src="path/to/ejs-multiselect.min.js"></script>

2. Create a select element with the ejs-multiselect class, and add the data-options attribute to define the options:

<select class="ejs-multiselect" data-options="Option 1,Option 2,Option 3"></select>

3. Initialize the multiselect dropdown list using the EjsMultiselect() function:

<script>
new EjsMultiselect('.ejs-multiselect');
</script>

Options

EJS Multiselect provides several options that can be customized to suit your needs. These options can be passed to the EjsMultiselect() function as an object. Here are the available options:

• allowNew: A boolean value that determines whether new options can be added to the list. Default is false.
• enableSearch: A boolean value that determines whether a search box should be displayed to filter the options. Default is true.
• searchPlaceholder: A string that sets the placeholder text for the search box. Default is 'Search'.
• maxHeight: An integer that sets the maximum height of the dropdown list. Default is 250.
• multiple: A boolean value that determines whether multiple options can be selected. Default is true.

Here is an example of how to customize the options:

<script>
new EjsMultiselect('.ejs-multiselect', {
    allowNew: true,
    enableSearch: false,
    maxHeight: 300
});
</script>

Methods

EJS Multiselect provides several methods that can be used to manipulate the dropdown list. These methods can be accessed using the EjsMultiselect() function. Here are the available methods:

• addOptions(options): Adds new options to the list. The options argument can be a string of comma-separated values, or an array of strings.
• removeOptions(options): Removes options from the list. The options argument can be a string of comma-separated values, or an array of strings.
• getOptions(): Returns an array of all the available options.
• getSelected(): Returns an array of the currently selected options.
• clearSelected(): Clears all the selected options.
• disable(): Disables the dropdown list.
• enable(): Enables the dropdown list.

Here is an example of how to use the methods:

<script>
const multiselect = new EjsMultiselect('.ejs-multiselect');

multiselect.addOptions('Option 4,Option 5');

const selected = multiselect.getSelected();

multiselect.removeOptions(selected);

multiselect.disable();
</script>

Conclusion

EJS Multiselect is an excellent Javascript library that provides a simple and easy-to-use multiselect dropdown list. Its extensive features and customization options make it an ideal choice for developers looking to provide a seamless user experience.