bootstrap-hardskilled-extend-select

Extended Select for Bootstrap 4 (analog bootstrap-select)

Demo and documentation

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-select

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>

Example usage:

<link rel="stylesheet" href="css/select.min.css">
<script src="js/select.min.js"></script>
<script>
    $('select').extendSelect();
</script> 

Usage with options:

<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> 

Key	Description	Default value
search	Search input placeholder	Search
notSelectedTitle	Title if option not selected	Nothing to shown
empty	Message if select list empty	Nothing to shown
activeClass	Class to active element	active
disabledClass	Class to disabled element	diabled
maxOptionMessage	Custom error message for all selects (use placeholder %items)	Limit reached (%items items max)
maxOptionMessageDelay	Delay to hide message	2000
popoverResize	Popover logic (resize or save height)	false
dropdownResize	Auto resize dropdown by button width	false

To listen changes use .on('change') event:

$('select#basic').on('change', function () {
    const selected = $(this).find(':selected').text();
    $('#basicResult').text('Selected: ' + selected)
})

HTML attributes to select:

<select 
    id="extendedSelect" 
    class="form-control" 
    data-live-search="true"
    data-max-options="2"
    data-max-options-message="Max items"
    data-live-search-placeholder="Find"
    data-hide-disabled="true"
    data-btn-class="btn-danger btn-block"
    data-input-group="true"
    data-not-selected="Select is empty"
    data-empty="Items not found"
    data-type="checkbox"
    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>

Attribute	Description	Default value
data-live-search	Live search	false
data-max-options	Max selected options	Nothing to shown
data-max-options-message	Message if select limit overflow	Limit reached (%items items max)
data-live-search-placeholder	Search input placeholder	Search
data-hide-disabled	Hide disabled elements	false
data-btn-class	Button class for dropdown	btn-secondary
data-not-selected	Title if option not selected	Nothing to shown
data-empty	Message if select list empty	Nothing to shown
data-type	Custom select type (ex. checkbox)	null
multiple	Enable multiple selections	false

Hire us via Upwork! | Our website