Custom Select Input In Vanilla JavaScript – Selectra

Selectra is a JavaScript library for creating dynamic, fully styled, highly customizable select boxes using plain JavaScript.

Can be used as a great alternative to the known jQuery select2 plugin.

Features:

• Supports multi-select.
• Supports nested optgroup.
• Supports live search.
• Supports loading data from JavaScript.
• Compatible with third-party frameworks like Bootstrap.
• Also available as a Vue component or a Custom Web Component.

How to use it:

1. Install and import the Selectra.

# NPM
$ npm i selectra --save

// As an ES module
import Selectra, { createSelectra } from 'selectra'
@import "selectra/src/scss/index.scss"

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

2. Initialize the Selectra on the target select element and done.

<select name="&quot; id="selectCustom">
  <option value="c" selected>CSS</option>
  <option value="s">Script</option>
  <option value="m">Com</option>
  <option value="disabled" disabled>Disabled</option>
</select>

const customSelectra = new Selectra('#selectCustom')
customSelectra.init()

3. Or load data from a JavaScript array as follows:

createSelectra('#selectCustom', {
  options: [
    {
      value: 'c',
      label: 'CSS'
    },
    {
      value: 's',
      label: 'Script'
    },
    {
      value: 'm',
      label: 'Com',
      selected: true
    },
    {
      value: 'd',
      label: 'Disabled',
      disabled: true
    }
  ]
})

4. Nested options are supported as well.

createSelectra('#selectCustom', {
  options: [
    {
      label: 'Group 1',
      options: [
        { value: 'c', label: 'CSS' },
        { value: 's', label: 'Script', selected: true }
      ]
    },
    {
      label: 'Group 2',
      options: [
        { value: 'd', label: 'Disabled', disabled: true },
        { value: 'm', label: 'Com' }
      ]
    }
  ]
})

5. Enable/disable the search field.

createSelectra('#selectCustom', {
  // enable live search
  search: false,
  // placeholder in search field
  langInputPlaceholder: 'Search',
  // placeholder when empty
  langEmptyValuePlaceholder: 'Pick a value',
  
})

6. Use the component in Vue.

new Vue({
    el: '#vue-app',
    mounted () {
      createSelectra('#targetSelect')
    },
    data () {
      return {
        value: false,
        values: ['option1', 'option2'],
        options: [
          { value: 'option1', label: 'Option 1' },
          { value: 'option2', label: 'Option 2' }
        ]
      }
    }
})

7. Set & get option values.

// get values
document.querySelector('#selectCustom').val();
// set values
document.querySelector('#selectCustom').val(['option1', 'option2']);

Changelog:

08/20/2023

• Bugfix