Cuadro de selección personalizable & biblioteca de mejora de campos de entrada-Choices. js

Vista prévia

Descripción

Choices. js es un plugin de JavaScript vainilla que convierte la selección normal y la entrada en entradas selectas personalizables con multi selección y soporte de autocompletar. Ideal para crear sistemas de etiquetado de selección múltiple.

Funcionamiento

Cargue el siguiente JavaScript y StyleSheet en el documento.

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

Cree una entrada de etiqueta simple a partir de un campo de texto normal que

<input id="demo-1" type="text" value="tag-1,tag-2" placeholder="Enter something">

var firstElement = document.getElementById('demo-1');
var choices1 = new Choices(firstElement, {


delimiter: ',',


editItems: true,


maxItems: 5,


removeButton: true
});

Cree una entrada de selección múltiple.

<select name="demo-2" id="demo-2" placeholder="This is a placeholder" multiple>

<option value="Dropdown item 1">Dropdown item 1</option>

<option value="Dropdown item 2">Dropdown item 2</option>

<option value="Dropdown item 3" selected>Dropdown item 3</option>

<option value="Dropdown item 4" disabled>Dropdown item 4</option>
</select>

var secondElement = new Choices('#demo-2', { allowSearch: false }).setValue(['Set value 1', 'Set value 2']);

Cree una entrada de selección múltiple que cargue datos remotos a través de AJAX.

<select name="demo-3" id="demo-3" data-choice placeholder="Pick an Arctic Monkeys record"></select>

var choicesAjax = new Choices('#demo-2').ajax((callback) => {


fetch('https://api.discogs.com/artists/391170/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')




.then((response) => {






response.json().then(function(data) {









callback(data.releases, 'title', 'title');






});




})




.catch((error) => {






callback();




});
})

Todas las opciones posibles y devoluciones de llamada con valores predeterminados.

items: [],
addItems: true,
removeItems: true,
removeButton: false,
editItems: false,
maxItems: false,
delimiter: ',',
allowDuplicates: true,
allowPaste: true,
allowSearch: true,
 _regexFilter: false,
placeholder: true,
placeholderValue: '',
prependValue: false,
appendValue: false,
selectAll: true,
loadingText: 'Loading...',
templates: {},
classNames: {

containerOuter: 'choices',

containerInner: 'choices__inner',

input: 'choices__input',

inputCloned: 'choices__input--cloned',

list: 'choices__list',

listItems: 'choices__list--multiple',

listSingle: 'choices__list--single',

listDropdown: 'choices__list--dropdown',

item: 'choices__item',

itemSelectable: 'choices__item--selectable',

itemDisabled: 'choices__item--disabled',

itemOption: 'choices__item--option',

group: 'choices__group',

groupHeading : 'choices__heading',

button: 'choices__button',

activeState: 'is-active',

focusState: 'is-focused',

openState: 'is-open',

disabledState: 'is-disabled',

highlightedState: 'is-highlighted',

hiddenState: 'is-hidden',

flippedState: 'is-flipped',

selectedState: 'is-selected',
},
callbackOnInit: () => {},
callbackOnRemoveItem: () => {},
callbackOnAddItem: () => {}

Registro de cambios

02/23/2019

• v6.0.2: Resolve undefined error

02/19/2019

• v6.0.1

02/13/2019

• v6.0.0: callback to filter items before adding

02/12/2019

• v5.1.0: callback to filter items before adding

01/25/2019

• v4.1.4: Bugfix

11/26/2018

• v4.1.3: Fix set choice by value bug

11/25/2018

• v4.1.2: Fix form submission bug in firefox

11/03/2018

• v4.1.0: Disable input when loading remote data

10/31/2018

• v4.0.6: Disable at a later stage of intialising