Componente desplegable de selección múltiple para JavaScript-Slim-Select

Vista prévia

Descripción

Slim-Select es un plugin de JavaScript pequeño y libre de dependencia para crear una lista desplegable de selección múltiple de búsqueda y seleccionable desde un elemento Select normal.

Instalación

# Yarn
yarn add slim-select

# NPM
$ npm install slim-select

Import the slim-select into your project.

import SlimSelect from 'slim-select'

Funcionamiento

Inicialice la selección delgada en el elemento de selección de destino y listo.

<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'
})

También admite grupos de opciones:

<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>

Y selección múltiple:

<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>

Todas las opciones de configuración posibles:

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)


}
})

Métodos de la API:

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()

Registro de cambios

09/25/2018

• v1.17.0