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="./assets/vendor/select2/dist/css/select2.min.css">
Copy

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

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

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>
Copy

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 -->
Copy

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 -->
Copy

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 -->
Copy

Search 

<!-- Select -->
<select class="js-custom-select custom-select" size="1" style="opacity: 0;"
        data-hs-select2-options='{
          "placeholder": "Select month"
        }'>
  <option value="1" selected>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 -->
Copy

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 -->
Copy

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 -->
Copy

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 -->
Copy

With append

Search 
<!-- 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 -->
Copy

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 -->
Copy

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 -->
Copy

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 -->
Copy

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 -->
Copy

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 -->
Copy

Modal example 

<!-- Button Trigger Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Open modal
</button>
<!-- End Button Trigger Modal -->

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <i class="la la-times" aria-hidden="true"></i>
        </button>
      </div>
      <div class="modal-body">
        <!-- 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 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Continue</button>
      </div>
    </div>
  </div>
</div>
<!-- End Modal -->
Copy

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>
Copy

Attributes

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

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

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