Lightweight Customizable Select Box Enhancement Library – Selectr

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:

07/10/2019

• v2.4.13: Updated

06/01/2019

• v2.4.11: Various XSS vulnerability fixes

11/24/2018

• v2.4.8: fix config bleeding into multiple instances

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.