Multi-select Dropdown Component For JavaScript – slim-select

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