Choices

Choices.js is a lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency

Example

                      
                        <label for="organizerMultiple">Multiple</label>
                        <select class="form-select js-choice" id="organizerMultiple" multiple size="1" name="organizerMultiple" data-options='{"removeItemButton":true,"placeholder":true}'>
                          <option value="">Select organizer...</option>
                          <option>Massachusetts Institute of Technology</option>
                          <option>University of Chicago</option>
                          <option>GSAS Open Labs At Harvard</option>
                          <option>California Institute of Technology</option>
                        </select>
                      
                    

How to use?

Add the js-choice on any element that you want to become a clickable link.

Copy-paste the following <script> near the end of your pages under Muse Javascript Plugins to enable it.

              
                <script src="../assets/vendor/choices-master/public/assets/scripts/choices.min.js"></script>
              
            

Copy-paste the following <link> near the end of your pages under Muse Plugins CSS to enable it.

              
                <link rel="stylesheet" href="../assets/vendor/choices-master/public/assets/styles/choices.min.css">
              
            

Copy-paste the init function under JS Plugins Init, before the closing </body> tag, to enable it.

              
                const element = document.querySelector('.js-choice');
                const choices = new Choices(element, {
                  removeItemButton: true,
                });