Extended Select for Bootstrap 4 (analog bootstrap-select)

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

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

Create Issue or request features

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>

"Basic" (liveSearch disabled)

Example:

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

"Basic" (liveSearch enabled)

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>

"Basic" (multiple)

To enable multiple select use the attribute:

multiple

Example:

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

Multiple with max-options

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>

Multiple with max-options and custom text

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>

Live search placeholder

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>

Hidden disabled elements

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>

"Basic" (colored elements)

btn-primary: btn-success: btn-info: btn-warning: btn-danger:

To customise button use the attribute:

data-btn-class="btn-danger btn-block"

To default used class:

btn-secondary

Example:

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

Input Groups

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>

Override empty labels

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>

Custom select types

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>