Choice Select

Choices.js is a vanilla JavaScript plugin that converts the normal select or input into customizable select inputs with multi-select and autocomplete support.

There are few options on how to include/import Choice.js into your project.

Install from yarn

Install the Choices.js library from command prompt from the root directory of the project:

yarn add choices.js --save

Import Choices.js link from the libs.

<link rel="stylesheet" href="assets/libs/choices.js/public/assets/styles/choices.min.css"></link>

<script src="assets/libs/choices.js/public/assets/styles/choices.min.css"><script/>

Below the example how to use the package and make it working Choices.js on any page.

HTML

    Monthly
    Weekly
    Annualy

JavaScript

const topProductSelect = document.querySelector('#top-product-select');
if (topProductSelect) {
    new Choices(topProductSelect, {
        searchEnabled: false,
        placeholder: false,
        itemSelectText: false,
    });
}