Select2
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
Official documentation
For more detailed information and examples, see the official documentation: Select2.js.
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>
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 -->
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>
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>
<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>
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>
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>
Use .input-group-prepend and .input-group-append classes
<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>
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>
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>
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>
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>
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>
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 -->
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>
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>
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>
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. |