Customizable Vanilla JS Selection Box/Text Input Plugin

Choices.js is vanilla, lightweight (~19KB compressed 🎉), configurable checkbox/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.

select box with input field, input with select dropdown, select box with text input html, how to display selected value of dropdownlist in html, drop down list in html

How to make use of it:

1. Load the following JavaScript and Stylesheet into your document.

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

2. Create a simple tag input from a plain text field.

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

3. Create multiple select inputs.

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

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

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

Customizable Select Box & Input Field Enhancement Library, Choices.js Plugin/Github