Select

The jQuery replacement for select boxes.

Select2 documentation

How to use?

Add the following library Select2 stylesheet and script in your page.

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

              
                <link rel="stylesheet" href="./node_modules/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="./node_modules/select2/dist/js/select2.full.min.js"></script>
              
            

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

              
                <script src="./assets/js/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 SELECT PICKER
                    // =======================================================
                    $('.js-custom-select').each(function () {
                      var select2 = $.HSCore.components.HSSelect2.init($(this));
                    });
                  });
                </script>
              
            

Basic example

                    
                      <!-- Select -->
                      <select class="js-custom-select custom-select" size="1" style="opacity: 0;"
                              data-hs-select2-options='{
                                "minimumResultsForSearch": "Infinity"
                              }'>
                        <option value="1">Bruce Maynard</option>
                        <option value="2">Hollis Clark</option>
                        <option value="3">Lester Howard</option>
                        <option value="4">George Marino</option>
                        <option value="5">Tyler Johnson</option>
                        <option value="6">Jennifer Craig</option>
                        <option value="7">Martha Barnwell</option>
                        <option value="8">Florencia Todd</option>
                        <option value="9">Henry Sloan</option>
                        <option value="10">Abigail Watson</option>
                      </select>
                      <!-- End Select -->
                    
                  

Placeholder

                    
                      <!-- Select -->
                      <select class="js-custom-select custom-select" size="1" style="opacity: 0;"
                              data-hs-select2-options='{
                                "minimumResultsForSearch": "Infinity",
                                "placeholder": "Select member"
                              }'>
                        <option label="empty"></option>
                        <option value="1">Bruce Maynard</option>
                        <option value="2">Hollis Clark</option>
                        <option value="3">Lester Howard</option>
                        <option value="4">George Marino</option>
                        <option value="5">Tyler Johnson</option>
                        <option value="6">Jennifer Craig</option>
                        <option value="7">Martha Barnwell</option>
                        <option value="8">Florencia Todd</option>
                        <option value="9">Henry Sloan</option>
                        <option value="10">Abigail Watson</option>
                      </select>
                      <!-- End Select -->
                    
                  

Custom width

Use dropdownAutoWidth and width props.

                    
                      <!-- Select -->
                      <select class="js-custom-select custom-select" size="1" style="opacity: 0;"
                              data-hs-select2-options='{
                                "minimumResultsForSearch": "Infinity",
                                "dropdownAutoWidth": true,
                                "width": "auto"
                              }'>
                        <option value="1">6 entries</option>
                        <option value="2">12 entries</option>
                        <option value="3">18 entries</option>
                        <option value="4">24 entries</option>
                      </select>
                      <!-- End Select -->
                    
                  

Multiple

                    
                      <!-- Select -->
                      <select class="js-custom-select custom-select" size="1" multiple style="opacity: 0;"
                              data-hs-select2-options='{
                                "minimumResultsForSearch": "Infinity"
                              }'>
                        <option value="1" selected>Life</option>
                        <option value="2">Custom</option>
                        <option value="3">New</option>
                        <option value="4">Best Saller</option>
                        <option value="5">Language</option>
                        <option value="6">Stream</option>
                        <option value="7">HTML</option>
                        <option value="8">PHP</option>
                        <option value="9">JavaScript</option>
                        <option value="10">Vue.js</option>
                      </select>
                      <!-- End Select -->
                    
                  

Multiple selection

                    
                      <!-- Select -->
                      <select class="js-custom-select custom-select" size="1" multiple style="opacity: 0;"
                              data-hs-select2-options='{
                                "minimumResultsForSearch": "Infinity",
                                "singleMultiple": true,
                                "placeholder": "Select user"
                              }'>
                        <option value="1" selected>Life</option>
                        <option value="2" selected>Custom</option>
                        <option value="3">New</option>
                        <option value="4" selected>Best Saller</option>
                        <option value="5">Language</option>
                        <option value="6">Stream</option>
                        <option value="7" selected>HTML</option>
                        <option value="8">PHP</option>
                        <option value="9">JavaScript</option>
                        <option value="10">Vue.js</option>
                      </select>
                      <!-- End Select -->
                    
                  

Optgroup

Use <optgroup> tag

                    
                      <!-- Select -->
                      <select class="js-custom-select custom-select" size="1" style="opacity: 0;"
                              data-hs-select2-options='{
                                "minimumResultsForSearch": "Infinity"
                              }'>
                        <optgroup label="Optgroup 1">
                          <option value="item-1-1">Item 1</option>
                          <option value="item-1-2">Item 2</option>
                        </optgroup>
                        <optgroup label="Optgroup 2">
                          <option value="item-2-1">Item 1</option>
                          <option value="item-2-2">Item 2</option>
                        </optgroup>
                      </select>
                      <!-- End Select -->
                    
                  

With append

                    
                      <!-- Input Group -->
                      <div class="input-group">
                        <div class="input-group-prepend">
                          <select class="js-custom-select custom-select" size="1" style="opacity: 0;"
                                  data-hs-select2-options='{
                                    "minimumResultsForSearch": "Infinity",
                                    "width": "140px"
                                  }'>
                            <option value="1" selected>All</option>
                            <option value="2">HTML</option>
                            <option value="3">CSS</option>
                            <option value="4">JS</option>
                            <option value="5">PHP</option>
                            <option value="6">Vue.js</option>
                            <option value="7">React</option>
                            <option value="8">Angular</option>
                            <option value="9">Ruby</option>
                            <option value="10">Python</option>
                          </select>
                        </div>
                        <input type="text" class="form-control" placeholder="Search">
                        <div class="input-group-append">
                          <a class="btn btn-primary" href="#">
                            Search
                          </a>
                        </div>
                      </div>
                      <!-- End Input Group -->
                    
                  

Placeholder with icon/image

                    
                      <!-- Select -->
                      <select class="js-custom-select custom-select" size="1" style="opacity: 0;"
                              data-hs-select2-options='{
                                "minimumResultsForSearch": "Infinity",
                                "placeholder": "<span class=\"d-flex align-items-center\"><i class=\"far fa-user mr-2\"></i> Select member</span>"
                              }'>
                        <option label="empty"></option>
                        <option value="1">Bruce Maynard</option>
                        <option value="2">Hollis Clark</option>
                        <option value="3">Lester Howard</option>
                        <option value="4">George Marino</option>
                        <option value="5">Tyler Johnson</option>
                        <option value="6">Jennifer Craig</option>
                        <option value="7">Martha Barnwell</option>
                        <option value="8">Florencia Todd</option>
                        <option value="9">Henry Sloan</option>
                        <option value="10">Abigail Watson</option>
                      </select>
                      <!-- End Select -->
                    
                  

Custom tags

                    
                      <!-- Select -->
                      <select class="js-custom-select custom-select" size="1" multiple style="opacity: 0;"
                              data-hs-select2-options='{
                                "minimumResultsForSearch": "Infinity",
                                "placeholder": "Type tags here...",
                                "tags": true
                              }'>
                        <option label="empty"></option>
                      </select>
                      <!-- End Select -->
                    
                  

Dynamic option creation

                    
                      <!-- Select -->
                      <select class="js-custom-select custom-select form-control"
                              data-hs-select2-options='{
                                "tags": true
                              }'>
                        <option value="january" selected>Apple</option>
                        <option value="february">Orange</option>
                      </select>
                      <!-- End Select -->
                    
                  

With images

                    
                      <!-- Select -->
                      <select class="js-custom-select custom-select" size="1" style="opacity: 0;"
                              data-hs-select2-options='{
                                "placeholder": "Select wallet"
                              }'>
                        <option value="1" selected data-option-template='<span class="d-flex align-items-center"><img class="avatar-xs rounded-circle mr-2" src="../assets/img/100x100/img1.jpg" alt="Image description" /><span>Katy Nelson</span></span>'>
                          Katy Nelson
                        </option>
                        <option value="2" data-option-template='<span class="d-flex align-items-center"><img class="avatar-xs rounded-circle mr-2" src="../assets/img/100x100/img2.jpg" alt="Image description" /><span>Maria Williams</span></span>'>
                          Maria Williams
                        </option>
                        <option value="3" data-option-template='<span class="d-flex align-items-center"><img class="avatar-xs rounded-circle mr-2" src="../assets/img/100x100/img4.jpg" alt="Image description" /><span>Karl Marks</span></span>'>
                          Karl Marks
                        </option>
                        <option value="4" data-option-template='<span class="d-flex align-items-center"><img class="avatar-xs rounded-circle mr-2" src="../assets/img/100x100/img8.jpg" alt="Image description" /><span>Adam Brown</span></span>'>
                          Adam Brown
                        </option>
                        <option value="5" data-option-template='<span class="d-flex align-items-center"><img class="avatar-xs rounded-circle mr-2" src="../assets/img/100x100/img11.jpg" alt="Image description" /><span>Sara Pak</span></span>'>
                          Sara Pak
                        </option>
                        <option value="6" data-option-template='<span class="d-flex align-items-center"><img class="avatar-xs rounded-circle mr-2" src="../assets/img/100x100/img10.jpg" alt="Image description" /><span>Victoria Drizz</span></span>'>
                          Victoria Drizz
                        </option>
                      </select>
                      <!-- End Select -->
                    
                  

Disabled

                    
                      <!-- Select -->
                      <select class="js-custom-select custom-select" size="1" disabled style="opacity: 0;"
                              data-hs-select2-options='{
                                "minimumResultsForSearch": "Infinity"
                              }'>
                        <option value="1">Bruce Maynard</option>
                        <option value="2">Hollis Clark</option>
                        <option value="3">Lester Howard</option>
                        <option value="4">George Marino</option>
                        <option value="5">Tyler Johnson</option>
                        <option value="6">Jennifer Craig</option>
                        <option value="7">Martha Barnwell</option>
                        <option value="8">Florencia Todd</option>
                        <option value="9">Henry Sloan</option>
                        <option value="10">Abigail Watson</option>
                      </select>
                      <!-- End Select -->
                    
                  

SCSS

SCSS-files of the component can be found here assets/scss/front/vendor/select2/

Extend

By assigning a variable, you can call the standard methods of the plugin:

              
                <script>
                  $(document).on('ready', function () {
                    // INITIALIZATION OF SELECT2
                    // =======================================================
                    $('.js-custom-select').each(function () {
                      var select2 = $.HSCore.components.HSSelect2.init($(this));

                      select2.on('select2:open', () => {
                        alert('Open!')
                      })
                    });
                  });
                </script>
              
            

Attributes

By assigning a variable, you can call the standard methods of the plugin:

              
                data-hs-select2-options='{
                 ...
              }' - array
              
            

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-select2-options='{}'. For more detailed or missing attributes/functions, see the official Select2 documentation page.

Parameters Description Default value

customClass

Class for select field custom-select

width

Width of input 100%

searchInputPlaceholder

Placeholder for serach input inside container false

singleMultiple

Placeholder for serach input inside container false

multiplePlaceholder

Text neasted input with tags for multiple select false