Author: | cirykpopeye |
---|---|
Views Total: | 30 views |
Official Page: | Go to website |
Last Update: | August 20, 2023 |
License: | MIT |
Preview:

Description:
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="" 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