simp-select

Replacing native select, multiselect

Features

• ~37 KB
• no dependencies
• select, multiselect
• Optgroup
• Search
• Mobile native select (setting)

Installation

npm install simp-select --save

Or you can load it via a script tag as follows:

<script src="https://unpkg.com/[email protected]/dist/simpleSelect.js" ></script>
<script src="https://unpkg.com/[email protected]/dist/polyfill.js" ></script> - for IE 11
Or get last version
<script src="https://unpkg.com/simp-select"></script>

Importing

ES6

import SimpSelect from 'simp-select';
Types
import { ISimpleSelectProps, ISimpleSelectLocale } from 'simp-select/dist/types/simpleSelect.types';

CommonJS

var SimpSelect = require('simp-select');

Global variable

the variable SimpSelect attached to window or this depending on what environment you are using

API

new SimpSelect(selector, <options>)

| Property | Value | |----------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | selector(required) | string(css selector), HTMLSelectElement, HTMLSelectElement(Array, HTMLSelectElement) | | OPTIONS: | | | countShowSelected:number* | default: 3 Show count selected options. If more then this count, showed template: Selected: 4Or - data-simple-count-shows-selected="3" - in select | | isSearch:boolean* | default: false Show input for filter items Or - data-simple-select-search="true" - in select | | isSearchInDropdown:boolean* | default: false Show search input inside dropdown Or - data-simple-select-search-dropdown="true" - in select | | isConfirmInMulti:boolean* | default: false Show buttons OK and Cancel. Only Multiselect Or data-simple-is-confirm="true" - in select</> | | isConfirmInMultiOkClickOutside:boolean | default: false Click outside like click by button OK. Only if isConfirmInMulti=true | | nativeOnDevice:string[] | default: 'Android', 'BlackBerry', 'iPhone', 'iPad', 'iPod', 'Opera Mini', 'IEMobile', 'Silk' The system default select list is rendered on the matched device(Check useragent ). | | debounceTime:number* | default: 0 The change event will not be triggered immediately, but after a specified amount of time. Or data-simple-debounce-time="1000" in select | | floatWidth:number* | default: 767 Minimum screen width of device below which the dropdown is rendered like popup. Or data-simple-float-width="500" in select. Or data-simple-float-none="true" - cancel for select | | sepChars:string | default: , Separator for selected element. Show | | selectAll:boolean* | default: false Show button - Select all Or data-simple-select-all="true" in select | | selectAllAfterClose:boolean | default: true Close dropdown after click for select all | | resetAll:boolean* | default: false Show button - Reset all Or data-simple-reset-all="true" in select | | resetAllAfterClose:boolean | default: true Close dropdown after click for Reset all | | isCloneClass:boolean | default: true Clone class from native select to wrapper created select | | isRemoveTop:boolean* | default: false Do not create top element (Title, arrow, search ) (default: false) Or data-simple-remove-top="true" in select | | isUp:boolean* | default: false Dropdown rendering the direction in which to open the dropdown (default: false) Or data-simple-up="true" in select | | isAlwaysOpen:boolean* | default: false Dropdown always open (default: false) Or data-simple-always-open="true" in select | | isAlwaysOpenShowDisabledTabindex:boolean* | default: false Set tabindex (tabindex="0") for disabled element (In Always open list) | | isOnlyPlaceholder:boolean* | default: false Show only placeholder. Don't show selected options (default: false) Or data-simple-is-only-placeholder="true" in select | | detectNative:function | default: none Return true if need rendering native select | | changeBodyLi:function | default: none Custom (body) item renderer | | locale:{key: string} | default: simpleSelectLocale ** Object of locales. ** | | historyMaxSize: number | default: 0 Maximum number of saved changes. | | isScrollToCheckedFirst: boolean | default: true Scroll to the first element. This works only on the first opening. | | isScrollToCheckedAlways: boolean | default: false Scroll to the first element. This works on each opening. | | Options only DOM elements | | | data-simple-placeholder="text": Select | Replace default placeholder (locale.title) | | data-simple-item-html-before="before: Select | Add HTML before content (for item Li) | | data-simple-item-html-after="after": Select | Add HTML after content (for item Li) | | data-simple-add-classes="class1 class2": Select | Add classes for wrapper SimpSelect | | data-simple-html-before="before": option | Add HTML before content (for item Li) | | data-simple-html-after="after": option | Add HTML after content (for item Li) | | data-simple-show-checkbox: Select | Show checkbox in item (Li) (for single select) | | Callbacks | | | callbackInitialization: (item:SimpleSelectItem) => void | Before initialization | | callbackInitialized:(item:SimpleSelectItem) => void; | After initialization | | callbackOpen: (item:SimpleSelectItem) => void; | Open dropdown | | callbackClose: (item:SimpleSelectItem) => void; | Close dropdown | | callbackDestroyInit: (item:SimpleSelectItem) => void; | Before destroy SimpSelect | | callbackDestroy: (item:SimpleSelectItem) => void; | After destroy SimpSelect | | callbackChangeSelect :(e: Event, item:SimpleSelectItem) => void; | Change SimpSelect (change options) | | Methods | | | reload:select(DomElement).SimpSelect.reload() | Reload SimpSelect. | | update:select(DomElement).SimpSelect.update() | Update list (ul in dropdown) | | detach:select(DomElement).SimpSelect.detach() | Detach SimpSelect. | | getHistory:select(DomElement).SimpSelect.getHistory() | Get history. | | getHistoryLast:select(DomElement).SimpSelect.getHistoryLast() | Get history - last element. | | getHistoryFirst:select(DomElement).SimpSelect.getHistoryFirst() | Get history - first element. | | const simpleSelect = new SimpleSelect('select') | Instance of the SimpleSelect plugin object | | getSelectById('ID'):simpleSelect.getSelectById('ID') | Get item SimpSelect for ID (data-simple-select-init="ID" - dem element select) | | getSelectFirst():simpleSelect.getSelectFirst() | Get first item SimpSelect | | getSelects():simpleSelect.getSelects() | Get list SimpSelect |

*Data attributes in DOM element(select) more important than initialization options.

**Object of locales.
const simpleSelectLocale: = {
  noSearch: 'No matches for',
  searchText: 'Search',
  title: 'Select',
  selected: 'Selected:',
  all: 'all',
  ok: 'Ok',
  cancel: 'Cancel',
  selectAll: 'Select all',
  resetAll: 'Reset all',
};

Example Usage

import SimpleSelect from 'simp-select';

new SimpleSelect('select');

Demo

View Live Demo Here.

Browser Support

Supported on all modern browsers

For IE 11 need polyfills (Or Include file polyfill.js):

window.CustomEvent, Array.from, Array.prototype.forEach, NodeList.prototype.forEach, Element.prototype.matches,Element.prototype.closest