Choices

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

Install from NPM

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

npm install choices.js --save

Add the choices css file link. 

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

Add the choices js file link. 

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

Below the example how to use the package and make it working Virtual Select on any page.

HTML

<select id="default-choice">
    <option value="">Select a language</option>
    <option value="javascript">JavaScript</option>
    <option value="python">Python</option>
    <option value="java">Java</option>
    <option value="csharp">C#</option>
    <option value="ruby">Ruby</option>
</select>

JavaScript

document.addEventListener('DOMContentLoaded', function () {
    let blogChoice = document.getElementById('default-choice');
    if (blogChoice) {
        const choices = new Choices('#default-choice', {
            placeholderValue: 'Select Category',
            searchPlaceholderValue: 'Search...',
            removeItemButton: true,
            itemSelectText: 'Press to select',
        });
    }
    let multipleChoice = document.getElementById('choices-default-multiple');
    if (multipleChoice) {
        const multipleChoices = new Choices('#choices-default-multiple', {
        placeholderValue: '',
        searchPlaceholderValue: 'Search...',
        removeItemButton: true,
        itemSelectText: 'Press to select',
        shouldSort: false,
        });
        multipleChoice.selectedIndex = 0;
        multipleChoices.setChoiceByValue(multipleChoice.options[0].value);
    }
    let publisgChoice = document.getElementById('choices-publish-status');
    if (publisgChoice) {
        const publisgChoice = new Choices('#choices-publish-status', {
            placeholderValue: 'Select Status',
            searchPlaceholderValue: 'Search...',
            removeItemButton: true,
            itemSelectText: 'Press to select',
        });
    }
    let visibilityChoice = document.getElementById('choices-blog-visibility');
    if (visibilityChoice) {
        const visibilityChoice = new Choices('#choices-blog-visibility', {
            placeholderValue: 'Select Visibility',
            searchPlaceholderValue: 'Search...',
            removeItemButton: true,
            itemSelectText: 'Press to select',
        });
    }
});

Include Choices:. 

<script rel="stylesheet" src="assets/js/form/forms-select.init.js"></script>