Feature-rich Custom Select JavaScript Library – SimpSelect

Preview:

Description:

SimpSelect is a powerful and feature-rich JavaScript custom select library designed to enhance the user experience of the native element on your webpage.

It offers a visually appealing alternative to the default HTML select element, with features like showing a checkbox before each option, displaying the selected option(s), and providing confirm selection buttons.

Additionally, SimpSelect allows for the inclusion of HTML content within the options, as well as Select All and Deselect All buttons, and a live search functionality.

How to use it:

1. Install and import the SimpSelect with NPM.

# NPM
$ npm install simp-select

import SimpSelect from 'simp-select';

2. Or include the following files on the webpage.

new SimpleSelect('#mySelect', {
    // options here
})
4. Available options & callbacks to customize the custom select.
new SimpleSelect('#mySelect', {
    countShowSelected: number
    isConfirmInMulti: boolean;
    isConfirmInMultiOkClickOutside: boolean;
    searchTypeInput: string;
    isSearch: boolean;
    isSearchInDropdown: boolean;
    nativeOnDevice: string[];
    locale: {
      noSearch: string;
      searchText: string;
      title: string;
      selected: string;
      all: string;
      ok: string;
      cancel: string;
      resetAll: string;
      selectAll: string;
    };
    debounceTime?: number;
    floatWidth?: number;
    isRemoveTop: boolean,
    sepChars: string;
    historyMaxSize: number;
    selectAll: boolean;
    selectAllAfterClose: boolean;
    resetAll: boolean;
    resetAllAfterClose: boolean;
    isCloneClass: boolean;
    isOnlyPlaceholder: boolean;
    isUp: boolean;
    isAlwaysOpen: boolean;
    isAlwaysOpenShowDisabledTabindex: boolean;
    detectNative?: () => boolean;
    // callbacks
    callbackInitialization?: (item:SimpleSelectItem) => void;
    callbackInitialized?: (item:SimpleSelectItem) => void;
    callbackOpen?: (item:SimpleSelectItem) => void;
    callbackClose?: (item:SimpleSelectItem) => void;
    callbackDestroyInit?: (item:SimpleSelectItem) => void;
    callbackDestroy?: (item:SimpleSelectItem) => void;
    callbackChangeSelect?: (e: Event, item:SimpleSelectItem) => void;
})
5. You can also pass the options via HTML data-simple-OPTION attribute on your select element.

custom float 1 custom float 2

6. API methods.

const simpleSelect = new SimpleSelect('select')
select(DomElement).SimpSelect.reload()
select(DomElement).SimpSelect.update()
select(DomElement).SimpSelect.detach()
select(DomElement).SimpSelect.getHistory()
select(DomElement).SimpSelect.getHistoryLast()
select(DomElement).SimpSelect.getHistoryFirst()
simpleSelect.getSelectById('ID') 
simpleSelect.getSelectFirst()
simpleSelect.getSelects()