Lightweight Customizable Select Box Enhancement Library – Selectr

Category: Form , Javascript | October 27, 2018
Author: Mobius1
Views Total: 2,314
Official Page: Go to website
Last Update: October 27, 2018
License: MIT

Preview:

Lightweight Customizable Select Box Enhancement Library – Selectr

Description:

Selectr is a lightweight and customizable JavaScript library that converts the normal select box into a searchable, Ajax-enabled dropdown selector with custom styling and events. Useful for tag input, multi-select and much more.

How to use it:

To get started, you need to load the Selectr’s JS and CSS files in the webpage.

<link rel="stylesheet" href="selectr.min.css">
<script src="selectr.min.js"></script>

Or install with NPM.

npm install mobius1-selectr

Call the Selectr on your existing select box and done.

var mySelectr = new Selectr(document.getElementById('mySelectBox'));

Customize the select box with the following options.

var mySelectr = new Selectr(document.getElementById('mySelectBox'),{

    /**
     * Emulates browser behaviour by selecting the first option by default
     * @type {Boolean}
     */
    defaultSelected: true,

    /**
     * Sets the width of the container
     * @type {String}
     */
    width: "auto",

    /**
     * Enables/ disables the container
     * @type {Boolean}
     */
    disabled: false,

    /**
     * Enables / disables the search function
     * @type {Boolean}
     */
    searchable: true,

    /**
     * Enable disable the clear button
     * @type {Boolean}
     */
    clearable: false,

    /**
     * Sort the tags / multiselect options
     * @type {Boolean}
     */
    sortSelected: false,

    /**
     * Allow deselecting of select-one options
     * @type {Boolean}
     */
    allowDeselect: false,

    /**
     * Close the dropdown when scrolling (@AlexanderReiswich, #11)
     * @type {Boolean}
     */
    closeOnScroll: false,

    /**
     * Allow the use of the native dropdown (@jonnyscholes, #14)
     * @type {Boolean}
     */
    nativeDropdown: false,

    /**
     * Allow the use of native typing behavior for toggling, searching, selecting
     * @type {boolean}
     */
    nativeKeyboard: false,

    /**
     * Set the main placeholder
     * @type {String}
     */
    placeholder: "Select an option...",

    /**
     * Allow the tagging feature
     * @type {Boolean}
     */
    taggable: false,

    /**
     * Set the tag input placeholder (@labikmartin, #21, #22)
     * @type {String}
     */
    tagPlaceholder: "Enter a tag..."

});

API methods.

// Gets the current value of the select box
mySelectr.getValue()

// Sets the value of the current select box. 
// The method accepts both a single value for both single and multi-selects or an array of values with multi-selects only.
mySelectr.setValue('value-2')

// Searches the available options for a string.
mySelectr.search(query, anchor)

// Adds a new option.
mySelectr.add(data, duplicateCheck)

// Removes an option
mySelectr.remove(data)

// Removes all options
mySelectr.removeAll()

// Returns a serialized object of all options
mySelectr.serialize(toJson)

// Opens the dropdown
mySelectr.open()

// Closes the dropdown
mySelectr.close()

// Toggles the dropdown
mySelectr.toggle()

// Clears all options
mySelectr.clear()

// Resets options
mySelectr.reset()

// Disables the dropdown
mySelectr.disable()

// Enables the dropdown
mySelectr.enable()

Events available

mySelectr.on('selectr.init', function(e) {
  // ...
});

mySelectr.on('selectr.open', function(e) {
  // ...
});

mySelectr.on('selectr.close', function(e) {
  // ...
});

mySelectr.on('selectr.select', function(option) {
  // ...
});

mySelectr.on('selectr.deselect', function(option) {
  // ...
});

mySelectr.on('selectr.change', function(option) {
  // ...
});

mySelectr.on('selectr.clear', function(e) {
  // ...
});

mySelectr.on('selectr.reset', function(e) {
  // ...
});

mySelectr.on('selectr.paginate', function(data) {
  // ...
});

Changelog:

10/27/2018

  • v2.4.5: Fixed Option group isn’t created when using nested data set

10/06/2018

  • v2.4.4

09/24/2018

  • v2.4.3: fire native “change” event

09/15/2018

  • v2.4.2: Added more options, methods, and events.

Leave a Reply