Convenient Select List Enhancement – Selector

Preview:

Description:

A minimal, pure JavaScript plugin that transforms the regular select element into a beautiful, convenient, searchable/filterable dropdown list.

How to use it:

Load the main JavaScript and CSS files in your html file.

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

Add the CSS class ‘selector-instance’ to your existing select element as this:

<select class="selector-instance" name="first-selector" id="first">
  <option value="1" data-sublocale="HELLO" selected>Item 1</option>
  <option value="2">Item 2</option>
  <option value="3">Item 3</option>
  <option value="4">Item 4</option>
  <option value="5">Item 5</option>
  <option value="6">Item 6</option>
</select>

Initialize the Selector and done.

new Selector();

If you want to display a search field inside the dropdown list, just add the attribute data-type="search-selector" to the select and done.

<select class="selector-instance" data-type="search-selector" name="third-selector" id="second">
  <option value="1" data-sublocale="HELLO" selected>Item 1</option>
  <option value="2">Item 2</option>
  <option value="3">Item 3</option>
  <option value="4">Item 4</option>
  <option value="5">Item 5</option>
  <option value="6">Item 6</option>
  <option value="7">Item 7</option>
  <option value="8">Item 8</option>
  <option value="9">Item 9</option>
  <option value="10">Item 10</option>
</select>

Possible options with default values.

new Selector({

    // selector
    selector: null,

    // target element
    element: null,

    // custom label
    label: null,

    // normal and filter
    type: null,

    // disable selector instance
    disabled: false,

    // distinguish between multiple instances
    identifier: null,

    // makes opened options cover selected item box
    cover: false,

    // relative positioned
    relative: false
    
    // callbacks
    callback: null,
    onOpen: null,
    onClose: null,
    onSelect: null,

    // hooks
    destroy: null,
    created: null,
    opened: null,
    closed: null,
    selected: null,
    beforeCreate: null,
    beforeDestroy: null,
    destroyed: null,
    beforeSelect: null,
    
});

Changelog:

v3.2.0 (06/06/2018)

• added more options