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

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 Nova to enable it.

<script src="../../assets/js/components/hs.select2.js"></script>
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 show on type module
    $.HSCore.components.HSSelect2.init('.js-custom-select');
  });
</script>
Copy

Basic examples 

<!-- Select2 -->
<select class="js-custom-select"
        data-is-hide-search="true">
  <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 -->
Copy

Use data-placeholder="..." attribute

<select class="js-custom-select"
        data-is-hide-search="true"
        data-placeholder="Select member">
  <option></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>
Copy

Use .custom-select-without-bordered class for data-classes="" attribute

<select class="js-custom-select"
        data-width="auto"
        data-classes="custom-select-without-bordered">
  <option value="6" selected>6 entries</option>
  <option value="12">12 entries</option>
  <option value="18">18 entries</option>
  <option value="24">24 entries</option>
</select>
Copy
<select class="js-custom-select"
        data-placeholder="Select month">
  <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>
Copy

Use multiple and data-is-hide-search="true" attributes for disable search

<select class="js-custom-select" multiple style="width: 100%;"
        data-is-hide-search="true">
  <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>
Copy

Use <optgroup> tag

<select class="js-custom-select"
        data-is-hide-search="true">
  <optgroup class="font-weight-light" 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>
Copy

Use .input-group-prepend and .input-group-append classes

Search 
<div class="input-group flex-nowrap">
  <div class="input-group-prepend">
    <select class="js-custom-select"
            style="width: 100%"
            data-is-hide-search="true">
      <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 href="#" class="btn btn-primary d-flex align-items-center">
      Search
    </a>
  </div>
</div>
Copy

Use disabled attrubute

<select disabled class="js-custom-select"
        data-is-hide-search="true">
  <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>
Copy

With icon/image

Use data-placeholder='<span><i class="nova-user mr-2"></i> Select member</span>'

<select class="js-custom-select"
        data-is-hide-search="true"
        data-placeholder='<span><i class="nova-user mr-2"></i> Select member</span>'>
  <option></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>
Copy

Use data-option-template='HTML here...'

<select class="js-custom-select mb-3 mb-md-4" style="width: 100%;"
        data-placeholder="Select member">
  <option value="1" selected
          data-option-template='<span class="d-flex align-items-center"><img class="mr-2 rounded-circle" src="../../assets/img/100x100/img9.jpg" alt="Image description" width="24" /><span>John Doe</span></span>'>
    John Doe
  </option>
  <option value="2"
          data-option-template='<span class="d-flex align-items-center"><img class="mr-2 rounded-circle" src="../../assets/img/100x100/img4.jpg" alt="Image description" width="24" /><span>Alex Kim</span></span>'>
    Alex Kim
  </option>
  <option value="3"
          data-option-template='<span class="d-flex align-items-center"><img class="mr-2 rounded-circle" src="../../assets/img/100x100/img12.jpg" alt="Image description" width="24" /><span>David Food</span></span>'>
  </option>
  <option value="4"
          data-option-template='<span class="d-flex align-items-center"><img class="mr-2 rounded-circle" src="../../assets/img/100x100/img8.jpg" alt="Image description" width="24" /><span>Karl Marks</span></span>'>
    Adison Lee
  </option>
  <option value="5"
          data-option-template='<span class="d-flex align-items-center"><img class="mr-2 rounded-circle" src="../../assets/img/100x100/img5.jpg" alt="Image description" width="24" /><span>Adison Lee</span></span>'>
  </option>
  <option value="6"
          data-option-template='<span class="d-flex align-items-center"><img class="mr-2 rounded-circle" src="../../assets/img/100x100/img7.jpg" alt="Image description" width="24" /><span>Adam Brown</span></span>'>
    Adam Brown
  </option>
  <option value="7"
          data-option-template='<span class="d-flex align-items-center"><img class="mr-2 rounded-circle" src="../../assets/img/100x100/img11.jpg" alt="Image description" width="24" /><span>Sara Pak</span></span>'>
    Sara Pak
  </option>
  <option value="8"
          data-option-template='<span class="d-flex align-items-center"><img class="mr-2 rounded-circle" src="../../assets/img/100x100/img10.jpg" alt="Image description" width="24" /><span>Victoria Drizz</span></span>'>
    Victoria Drizz
  </option>
</select>
Copy

More options

Use multiple and data-tags="true" attributes

<select class="js-custom-select" multiple style="width: 100%;"
        data-is-hide-search="true"
        data-tags="true"
        data-placeholder="Type tags here...">
  <option></option>
</select>
Copy

Use data-tags="true" attribute

<select class="js-custom-select form-control" style="width: 100%;"
        data-tags="true">
  <option value="january" selected>Apple</option>
  <option value="february">Orange</option>
</select>
Copy

Sizing

Use data-size="sm" or data-size="lg"

<!-- Small -->
<div class="input-group mb-3">
  <select class="js-custom-select"
          data-is-hide-search="true"
          data-size="sm"
    <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>
</div>
<!-- End Small -->

<!-- Default -->
<div class="input-group mb-3">
  <select class="js-custom-select"
          data-is-hide-search="true">
    <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>
</div>
<!-- End Default -->

<!-- Large -->
<div class="input-group">
  <select class="js-custom-select"
          data-is-hide-search="true"
          data-size="lg"
    <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>
</div>
<!-- End Large -->
Copy

Modal 

<!-- 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">Example Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="input-group">
          <label>Select friends</label>
          <select class="js-custom-select" multiple style="width: 100%;"
                  data-is-hide-search="true"
                  data-placeholder="John Doe, Mike ...">
            <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>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Continue</button>
      </div>
    </div>
  </div>
</div>
Copy

Validation states

For more inforamation about form validation your can read on Validation page

Select members 
<div class="u-has-success">
  <select class="js-custom-select"
          data-is-hide-search="true">
    <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>
  <small class="text-success">Select members</small>
</div>
Copy
Select members 
<div class="u-has-error">
  <select class="js-custom-select"
          data-is-hide-search="true"
          data-placeholder="Select members">
    <option></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>
  <small class="text-danger">Select members</small>
</div>
Copy

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-width By default select width equal 100%, you can set suctom width data-width="auto" or data-width="300px" etc...
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.
data-tags if true, selected options will be show as tags.