Choices

A lightweight, configurable select box/text input plugin.

Basic Example

Using the select dropdown

Javascript Code for this Element

const element = document.querySelector('#choices-single-default');
	const choices = new Choices(element);

HTML Code for this Element

<select class="form-control" data-trigger name="choices-single-default" id="choices-single-default" placeholder="Search Choices">
		<option value="">Select Choice option</option>
		<option value="Choice 1">Choice 1</option>
		<option value="Choice 2">Choice 2</option>
		<option value="Choice 3">Choice 3</option>
		<option value="Choice 4">Choice 4</option>
		<option value="Choice 5">Choice 5</option>
	</select>

Text Input

Limited to 5 entries

Javascript Code for this Element

var textRemove = new Choices(
		document.getElementById('elementIdName'),
		{
		allowHTML: true,
		delimiter: ',',
		editItems: true,
		maxItemCount: 5,
		removeItemButton: true,
		}
	);

HTML Code for this Element

<input class="form-control" id="choices-text-remove-button" type="text" value="Choice-1,Choice-2" placeholder="Enter something"/>