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 -->
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 -->
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 -->
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 -->
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 -->
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 |
|---|---|---|
|
|
Class for select field | custom-select |
|
|
Width of input | 100% |
|
|
Placeholder for serach input inside container | false |
|
|
Placeholder for serach input inside container | false |
|
|
Text neasted input with tags for multiple select | false |