Nautical Pirate Moustache

    bootstrap-hardskilled-extend-select

    1.2.2 • Public • Published

    Extended Select for Bootstrap 4 (analog bootstrap-select)

    release version npm version License: MIT dependences devDependences

    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

    Install

    npm i bootstrap-hardskilled-extend-select

    DownloadsWeekly Downloads

    1

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    62.2 kB

    Total Files

    10

    Last publish

    Collaborators

    • hinex