Select2

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

How to use?

Copy-paste the stylesheets <link> into your <head> to load the CSS.

            
              <link rel="stylesheet" href="../../assets/vendor/select2/dist/css/select2.min.css">

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

            
              <script src="../../assets/vendor/select2/dist/js/select2.full.min.js"></script>

Copy-paste the following <script> near the end of your pages under JS Nova to enable it.

            
              <script src="../../assets/js/components/hs.select2.js"></script>

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

            
              <script>
                $(document).on('ready', function () {
                  // initialization of show on type module
                  $.HSCore.components.HSSelect2.init('.js-custom-select');
                });
              </script>

Example 

                  
                    <!-- Select2 -->
                    <select class="js-custom-select" style="width: 100%;"
                            data-is-hide-search="true"
                            data-classes="select select-bordered rounded">
                      <option value="january" selected>January</option>
                      <option value="february">February</option>
                      <option value="march">March</option>
                      <option value="april">April</option>
                      <option value="may">May</option>
                      <option value="june">June</option>
                      <option value="july">July</option>
                      <option value="august">August</option>
                      <option value="september">September</option>
                      <option value="october">October</option>
                      <option value="november">November</option>
                      <option value="december">December</option>
                    </select>
                    <!-- End Select2 -->
                  
                
                  
                    <select class="js-custom-select" style="width: 100%;"
                            data-placeholder="Select month"
                            data-classes="select select-bordered rounded">
                      <option value="january"
                              data-option-template='<span class="d-flex align-items-center"><span>January</span></span>'>January</option>
                      <option value="february"
                              data-option-template='February'>February</option>
                      <option value="march"
                              data-option-template='March'>March</option>
                      <option value="april"
                              data-option-template='April'>April</option>
                      <option value="may"
                              data-option-template='May'>May</option>
                      <option value="june"
                              data-option-template='June'>June</option>
                      <option value="july"
                              data-option-template='July'>July</option>
                      <option value="august"
                              data-option-template='August'>August</option>
                      <option value="september"
                              data-option-template='September'>September</option>
                      <option value="october"
                              data-option-template='October'>October</option>
                      <option value="november"
                              data-option-template='November'>November</option>
                      <option value="december"
                              data-option-template='December'>December</option>
                    </select>
                  
                
                  
                    <select class="js-custom-select" style="width: 100%;"
                            data-placeholder="Select wallet"
                            data-classes="select select-bordered rounded">
                      <option value="Bank of New York Mellon" selected
                              data-option-template='<span class="d-flex align-items-center"><img class="mr-2" src="../assets/img/icons/visa.png" alt="Image description" width="24" /><span>Bank of New York Mellon</span></span>'>Bank of New York Mellon</option>
                      <option value="Brooklyn Bank"
                              data-option-template='<span class="d-flex align-items-center"><img class="mr-2" src="../assets/svg/companies-logos/maestro.svg" alt="Image description" width="24" /><span>Brooklyn Bank</span></span>'>Brooklyn Bank</option>
                      <option value="General Bank of Germany"
                              data-option-template='<span class="d-flex align-items-center"><img class="mr-2" src="../assets/img/icons/visa.png" alt="Image description" width="24" /><span>General Bank of Germany</span></span>'>General Bank of Germany</option>
                      <option value="KLMSB"
                              data-option-template='<span class="d-flex align-items-center"><img class="mr-2" src="../assets/svg/companies-logos/maestro.svg" alt="Image description" width="24" /><span>KLMSB</span></span>'>KLMSB</option>
                    </select>

JavaScript behavior

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-placeholder="".

Attribute Description
data-placeholder defines a placeholder select. In this case, you must specify an empty option tag, which must be left first, and there should also be no option tags selected using the selected attribute.
data-classes custom classes that will be added to the tag with the class .select2-selection.
data-dropdown-classes custom classes that will be added to the drop-down list.
data-is-hide-search if true, then search by items is not displayed.