Author: | brianvoe |
---|---|
Views Total: | 40,369 views |
Official Page: | Go to website |
Last Update: | September 25, 2018 |
License: | MIT |
Preview:

Description:
slim-select is a small and dependency-free JavaScript plugin for creating a searchable, multi-selectable dropdown list from a regular select element.
Installation:
# Yarn yarn add slim-select # NPM $ npm install slim-select
Import the slim-select into your project.
import SlimSelect from 'slim-select'
How to use it:
Initialize the slim-select on the target select element and done.
<select id="demo"> <option value="value 1">JavaScript</option> <option value="value 2">CSS3</option> <option value="value 3">HTML5</option> </select>
new SlimSelect({ select: '#demo' })
It also supports option groups:
<select id="single-optgroups"> <optgroup label="JavaScript"> <option value="value 1">Angular</option> <option value="value 2">React</option> <option value="value 3">Vue</option> </optgroup> <optgroup label="CSS"> <option value="value 4">Bootstrap</option> <option value="value 5">Foundation</option> <option value="value 6">Bulma</option> </optgroup> </select>
And multi select:
<select id="single-optgroups" multiple> <optgroup label="JavaScript"> <option value="value 1">Angular</option> <option value="value 2">React</option> <option value="value 3">Vue</option> </optgroup> <optgroup label="CSS"> <option value="value 4">Bootstrap</option> <option value="value 5">Foundation</option> <option value="value 6">Bulma</option> </optgroup> </select>
All possible configuration options:
new SlimSelect({ select: '#demo' placeholder: 'Placeholder Text Here', showSearch: false, // shows search field searchText: 'Sorry couldnt find anything', beforeOnChange: (info) => { console.log(info) return false // this will stop propagation } onChange: (info) => { console.log(info) } })
API methods:
var mySelect = new SlimSelect({ // options }) // update the value mySelect.set('value') // set data mySelect.setData([ {text: 'value1'}, {text: 'value2'} ]) // update the search field mySelect.search('value') // open / close the dropdown select.open() select.close()
Changelog:
09/25/2018
- v1.17.0
How to retrieve data from multiselect?
You can use mySelect.selected() and it returns an array with selected values
Can I set individual colors for the selected items, if so how?