You can require bootstrap plugin via cdn or download the archive with release and unzip into assets directory.
For install via npm, use command:
npm i --save bootstrap-hardskilled-extend-selectExample usage:
<link rel="stylesheet" href="css/select.min.css"> <script src="js/select.min.js"></script> <script> $('select').extendSelect(); </script>To listen changes use .on('change') event:
$('select#basic').on('change', function () { const selected = $(this).find(':selected').text(); $('#basicResult').text('Selected: ' + selected) })To use CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-hardskilled-extend-select@latest/css/select.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap-hardskilled-extend-select@latest/js/select.min.js"></script>
<link rel="stylesheet" href="css/select.min.css"> <script src="js/select.min.js"></script> <script> $('select').extendSelect({ // Search input placeholder: search: 'Find', // Title if option not selected: notSelectedTitle: 'Pls select', // Message if select list empty: empty: 'Empty', // Class to active element activeClass: 'active', // Class to disabled element disabledClass: 'disabled', // Custom error message for all selects (use placeholder %items) maxOptionMessage: 'Max %items elements', // Delay to hide message maxOptionMessageDelay: 2000, // Popover logic (resize or save height) popoverResize: true, // Auto resize dropdown by button width dropdownResize: true }); </script>
<select id="basic" class="form-control"> <option>Rabbit</option> <option>Cat</option> <option class="get-class" disabled>Owl</option> <optgroup label="Insects"> <option>Spider</option> <option>Worm</option> <option>Fly</option> </optgroup> </select>
To enable live search on select use the attribute:
data-live-search="true"Example:
<select id="basic-live" class="form-control" data-live-search="true"> <option>Rabbit</option> <option selected>Cat</option> <option class="get-class" disabled>Owl</option> <optgroup label="Insects"> <option>Spider</option> <option>Worm</option> <option>Fly</option> </optgroup> </select>
To enable multiple select use the attribute:
multipleExample:
<select id="basic2" class="form-control" multiple> <option selected>Rabbit</option> <option>Cat</option> <option class="get-class" disabled>Owl</option> <optgroup label="test" data-subtext="another test"> <option>Spider</option> <option selected>Worm</option> <option>Fly</option> </optgroup> </select>
To enable multiple select use the attribute:
multiple
To enable max options error use the attribute:
data-max-options="2"Example:
<select id="basic2" class="form-control" data-max-options="2" multiple> <option selected>Rabbit</option> <option>Cat</option> <option class="get-class" disabled>Owl</option> <optgroup label="test" data-subtext="another test"> <option>Spider</option> <option selected>Worm</option> <option>Fly</option> </optgroup> </select>
To enable multiple select use the attribute:
multiple
To enable max options error use the attribute:
data-max-options="2"
To customise error message use the attribute:
data-max-options-message="Max items"Example:
<select id="basic2" class="form-control" data-max-options="2" data-max-options-message="Max items" multiple> <option selected>Rabbit</option> <option>Cat</option> <option class="get-class" disabled>Owl</option> <optgroup label="test" data-subtext="another test"> <option>Spider</option> <option selected>Worm</option> <option>Fly</option> </optgroup> </select>
To enable live search on select use the attribute:
data-live-search="true"
To enable multiple select use the attribute:
multiple
You can customise live search placeholder:
data-live-search-placeholder="Find"Example:
<select multiple data-live-search="true" data-live-search-placeholder="Find"> <optgroup label="filter1"> <option>option1</option> <option>option2</option> <option>option3</option> <option>option4</option> </optgroup> <optgroup label="filter2"> <option>option1</option> <option>option2</option> <option>option3</option> <option>option4</option> </optgroup> <optgroup label="filter3"> <option>option1</option> <option>option2</option> <option>option3</option> <option>option4</option> </optgroup> </select>
To enable live search on select use the attribute:
data-live-search="true"
To hide disabled elements use the attribute:
data-hide-disabled="true"Example:
<select id="first-disabled" data-hide-disabled="true" data-live-search="true"> <optgroup disabled="disabled" label="disabled"> <option>Hidden</option> </optgroup> <optgroup label="Fruit"> <option>Apple</option> <option>Orange</option> </optgroup> <optgroup label="Vegetable"> <option>Corn</option> <option>Carrot</option> </optgroup> </select>
To customise button use the attribute:
data-btn-class="btn-danger btn-block"
To default used class:
btn-secondaryExample:
<select id="basic" data-btn-class="btn-danger btn-block" class="form-control"> <option>Rabbit</option> <option>Cat</option> <option class="get-class" disabled>Owl</option> <optgroup label="Insects"> <option>Spider</option> <option>Worm</option> <option selected>Fly</option> </optgroup> </select>
To customise button use the attribute:
data-btn-class="btn-primary"
To add "input-group-prepend" class for dropdown:
data-input-group="true"Example:
<div class="input-group mb-3"> <select id="inputGroups" data-btn-class="btn-primary" data-input-group="true" class="form-control"> <option>Rabbit</option> <option>Cat</option> <option class="get-class" disabled>Owl</option> <optgroup label="Insects"> <option>Spider</option> <option>Worm</option> <option selected>Fly</option> </optgroup> </select> <input type="text" class="form-control" aria-label="Text input with dropdown button"> </div>
To enable live search on select use the attribute:
data-live-search="true"
Override "notSelectedTitle" option into special select:
data-not-selected="Select is empty"
Override "empty" option into special select:
data-empty="Items not found"Example:
<select id="empty" data-btn-class="btn-info btn-block" data-live-search="true" data-not-selected="Select is empty" data-empty="Items not found" ></select>
To enable live search on select use the attribute:
data-live-search="true"
To use custom types use the attribute:
data-type="checkbox"Example:
<select id="empty" data-btn-class="btn-info btn-block" data-live-search="true" data-not-selected="Select is empty" data-empty="Items not found" ></select>