Feature-rich Custom Select JavaScript Library – SimpSelect

Category: Form , Javascript | April 10, 2024
Author:yura-brd
Views Total:103 views
Official Page:Go to website
Last Update:April 10, 2024
License:MIT

Preview:

Feature-rich Custom Select JavaScript Library – SimpSelect

Description:

SimpSelect is a powerful and feature-rich JavaScript custom select library designed to enhance the user experience of the native <select /> 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.

<link rel="stylesheet" href="/dist/style.css">
<script src="/dist/simpleSelect.js" ></script>
<!-- Polyfill for IE 11 -->
<script src="/dist/polyfill.js" ></script>

3. Call the function SimpleSelect on your existing select element and the library will do the rest.

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.

<select
  class="mySelect"
  multiple
  data-simple-placeholder="custom width float"
  data-simple-float-width="1500"
>
  <option value="custom-1">custom float 1</option>
  <option value="custom-2">custom float 2</option>
</select>

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()

You Might Be Interested In:


Leave a Reply