@ezmodus/select-picker v1.0.12

ezmodus select picker

Improve the select element with this new purely native Javascript written library.

Preface

I made this project, because I was updating one of my projects to Bootstrap 5 and I was using boostrap-select (https://github.com/snapappointments/bootstrap-select) which states "Now with bootstrap 5 support" on it's readme file (April 2022).

Unfortunately I noticed that this wasn't the case even living in 2023. I already started to refactor my project and I didn't want to rollback just because of this. Therefore I decided to write from scratch native JS version and also without bootstrap.

Because maybe someone else may be in the similar situation I decided to publish this to free use.

It works pretty much the same as bootstrap-select, but this also adds few extra features.

Release notes

• 1.0.12, March 21, 2024

  MutationObserver

• 1.0.11, January 16, 2024

  Reset select picker support

• 1.0.10, January 13, 2024

  Added more variables to search input

• 1.0.9, October 23, 2023

  Forgot to rebuild assets

• 1.0.8, October 23, 2023

  Change event trigger, search now includes data-desc and fix for dynamic width calculation

• 1.0.7, May 31, 2023

  SASS coloring variables and defaults

• 1.0.6, May 31, 2023

  disabled support, fix selected max and fixes data-dynamic to calculate element size better

• 1.0.5, March 23, 2023

  data-search-focus-mobile desktop and touch device difference, new defaults

• 1.0.4, March 19, 2023

  data-size attribute and auto focus on search

• 1.0.3, March 11, 2023

  ARIA-support, dynamic width and improved search

• 1.0.2, March 5, 2023

  Distribution files were development format, updated to production and minified.

• 1.0.1, March 5, 2023

  Menu fixes, SCSS variables and tweaks, <option> extension.

Examples

Multi select with default search. Limited select count 1 (more picked changes the dropdown text)

Multi select with disabled options and option with passed extra class with styling.

Multi select with search and clear. Also some options has data-desc attribute given with text.

Install

npm install @ezmodus/select-picker --save

You can use prebuilt javascript and styling or do modifications first by loading from source.

// from node modules
// from dist (prebuilt, minified)
@import '~@ezmodus/select-picker/dist/style.css';

// SCSS
@import '~@ezmodus/select-picker/src/_variables.scss';
// change variable settings here
$ezmodus-dropdown-tick-color: 'red';
// load rest of the styling
@import '~@ezmodus/select-picker/src/style.scss';

// from node modules
// from dist (prebuilt, minified)
import '@ezmodus/select-picker/dist/select';

// from source if you want to modify ezmodusSelectPicker-class
import '@ezmodus/select-picker/src/select';

Usage, defaults and modifiers

Simple just add the class ezmodus-select-picker to select-element.

You can pass any other class to new dropdown button by just adding extra classes to select-element.

<!-- single select -->
<select class="ezmodus-select-picker">...</select>

<!-- multi selection -->
<select class="ezmodus-select-picker" multiple>...</select>

<!-- more settings -->
<!--
Any other class than picker itself in select-element
will be passed to dropdown button as extra class.

Any class given to option will be passed to menu li-element.

If option is set as disabled, then li-element has data-disabled="true",
otherwise the attribute does not exist.

These helps developer even further to manipulate dropdown and items.
-->
<select class="ezmodus-select-picker another-class"
    data-size="6"
    title="Choose your role"
    data-tick="false"
    data-search="true"
    data-search-focus="true"
    data-search-from="both"
    data-search-placeholder="Find..."
    data-search-no-results="No results for {0}"
    data-selected-count="5"
    data-selected-text="{0} selected"
    data-selected-max= "5"
    data-clear-show="true"
    data-clear-text="clear"
    data-menu-item-height=""
     multiple>
    <!-- my option data -->
    <option value="1">Superuser</option>
    <option value="2">Normal user</option>
    <option value="3" data-desc="Special user, this is injected as subtext">
        Test user
    </option>
</select>

These can be modified a lot to give more richer tools to use.

Variables

SELECT ATTRIBUTES

SELECT DATA ATTRIBUTES

Add these attributes with prefix data-.

SELECT'S OPTION ATTRIBUTE

Development

Super simple setup

• Git clone the project
• Run npm install
• Run npm run build|watch|production
• View Demo under demo/index.html