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.167, April 29, 2025

  Tweaks to search and debug renderer

• 1.0.16, April 29, 2025

  Search function with optgroups

• 1.0.15, April 17, 2025

  Fixes single selection on menu which broke down from last patch

• 1.0.14, April 16, 2025

  Support to Optgroups and their legend tags, also separate class itself to own file.

• 1.0.13, September 16, 2024

  Fixes menu ul element height

• 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

| Attribute | Default | Description |-----------------------|---------------------------|----------------- | size | 1 | How many items are shown when dropdown opens. If select has more items than defined size then show scrollbar. This can also set with data-attribute. | title | Select | Text, what to show on when no selection on dropdown | multiple | | Activates multiple selection support

SELECT DATA ATTRIBUTES

Add these attributes with prefix data-.

| Attribute | Default | Description |-----------------------|---------------------------|----------------- | size | null | This is another way to setup how many items are shown when menu opens. This is is preferable way to setup without worrying browser to default render select with size and then hides it. On page load selects' with size may look bigger before transforming them to select picker. | tick | true | Shows tick on dropdown. | search | false | If 'true' then show search input for list items. Click here to see how search works | search-focus | true | If set, then automatically focus on search on desktop. | search-focus-mobile | false | If set, then automatically focus on search on touch devices. | search-from | null | Search from texts, if "values" then search looks values of "option value", if "both" then look for values or texts. | search-placeholder | Filter... | Placeholder text for search input. | search-no-results | No results matched "{0}" | When with given string search does not find anything, this is the message to show, {0} is magic and will be replaced with given input. | selected-count | 1 | How many items are shown until dropdown text is replaced with "selected-text" | selected-text | {0} selected | When too many items are selected this is the text shown in dropdown, {0} is magic and replaced with count of selected items. | selected-max | null | Integer, limits how many items are allowed to pick on multi select | clear-show | false | Only for multiple, but if 'true' then show button before the list to clear/reset existing selections | clear-text | clear selection | Default text for the clear selection button | menu-item-height | null | This is only for special cases where parent node is display:none. Picker normally uses offsetHeight to determine the height of the menu item. When select is already hidden, it cannot see the value correctly. If this is the case the default height is 31, but if you do custom styling then this is the way to correct it further. | dynamic | null | Integer as percent, eg "80", between 0-100. Finds out the longest list item's text content and calculates width and sets new min-width to be 80 percent of that. This is useful to show more beautiful look when options themselves are short, but they have long data-desc value.

SELECT'S OPTION ATTRIBUTE

| Attribute | Default | Description |-----------|-----------|-------------- | data-desc | | Text data to show as extra description with own styling. If texts are used then size of the menu is directive because items heights varies.

Development

Super simple setup

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