OverviewOfficial Website

Multi js is a user-friendly replacement for select boxes with the multiple attribute.

CSS

<!-- multi.js css -->
<link rel="stylesheet" type="text/css" href="{% static 'libs/multi.js/dist/multi.min.css'%}" />

Javascript

<!-- multi.js -->
<script src="{% static 'libs/multi.js/dist/multi.min.js'%}"></script>

Initjs (Custom js)

<!-- init js -->
<script src="{% static 'js/pages/form-advanced.init.js'%}"></script>

Add Package

yarn add multi.js --save

Remove Package

yarn remove multi.js or you can remove package by removing specific package from package.json

var multiSelectBasic = document.getElementById("multiselect-basic");
multi(multiSelectBasic, {
  enable_search: false
});

var multiSelectHeader = document.getElementById("multiselect-header");
multi(multiSelectHeader, {
  non_selected_header: "Cars",
  selected_header: "Favorite Cars"
});

var multiSelectOptGroup = document.getElementById("multiselect-optiongroup");
multi(multiSelectOptGroup, {
  enable_search: true
});