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

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

Basic example 

<!-- Select -->
<select class="js-custom-select"
        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"
        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"
        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"
        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" multiple
        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" multiple
        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"
        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"
            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"
        data-hs-select2-options='{
          "minimumResultsForSearch": "Infinity",
          "placeholder": "<span class=\"d-flex align-items-center\"><i class=\"far fa-user icon-text 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" multiple
        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 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"
        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" disabled
        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"
                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

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
Logo

Developed by Nasim Mahmud's team | Blueberry Framework · Powered by Nimusoft

© Blueberry. 2020 Nimusoft. All rights reserved.