Componente desplegable de selección múltiple con vanilla JavaScript-sellect. js

Vista prévia

Descripción

sellect. js es un plugin de JavaScript vainilla que convierte una entrada normal en una interfaz de usuario desplegable de selección múltiple donde los usuarios pueden seleccionar varios elementos de una lista de autocompletado/AutoSuggest. Ideal para el administrador de etiquetas/tokens.

Funcionamiento

Incluye el Font awesome necesario para los iconos.

<link rel="stylesheet" href="font-awesome.css">

Descargar y cargar el sellect. js ' JavaScript y StyleSheet en el documento.

<link rel="stylesheet" href="sellect.css">
<script src="sellect.js"></script>

Cree un campo de entrada normal:

<input type="text" id="my-element">

Cree un nuevo objeto ' sellect y defina las listas de elementos originales y de destino en JavaScript.

var mySellect = sellect("#my-element", {


originList: ['banana', 'apple', 'pineapple', 'papaya', 'grape', 'orange', 'grapefruit', 'guava', 'watermelon', 'melon'],


destinationList: ['banana', 'papaya', 'grape', 'orange', 'guava']
});

Inicializar el plugin y listo.

mySellect.init();

Funciones de devolución de llamada disponibles.

var mySellect = sellect("#my-element", {



// Called when the destination list receives a new item


onInsert: function( event, item ) {},



// Called when an item is removed from destination list


onRemove: function( event, item ) {}



});

API methods.

// Return a list of selected items
mySellect.getSelected();

// Return a list of unselected items
mySellect.getUnselected();