Customizable Select Box & Input Field Enhancement Library – Choices.js

Category: Form , Javascript | May 23, 2018
Author: jshjohnson
Views Total: 3,412
Official Page: Go to website
Last Update: May 23, 2018
License: MIT

Preview:

Customizable Select Box & Input Field Enhancement Library – Choices.js

Description:

Choices.js is a vanilla JavaScript plugin which converts the normal select and input into customizable select inputs with multi select and autocomplete support. Great for creating multi-select tagging systems.

How to use it:

Load the following JavaScript and Stylesheet in your document.

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

Create a simple tag input from a normal text field that

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

Create a multiple select input.

<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']);

Create a multiple select input that loads remote data via 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();
        });
})

All possible options and callbacks with default values.

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: () => {}

Changelog:

v3.0.4 (05/23/2018)

2 thoughts on “Customizable Select Box & Input Field Enhancement Library – Choices.js

  1. Victor

    i created a REST call api for my Dbase, what parameters could be used for ur API?
    http://localhost/ivr/new/Choices-master/rest_api.php/system_users

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

    Reply

Leave a Reply