Choices.js is a vanilla JavaScript plugin that converts the normal
select or input into customizable select inputs with multi-select
and autocomplete support.
Javascript
<!-- choices.js -->
<script type='text/javascript' src='assets/libs/choices.js/public/assets/scripts/choices.min.js'></script>
Note
Choices js file is loaded in <script src="assets/js/plugins.js"></script>.
Initjs (Custom js)
<!-- app js -->
<script src="assets/js/app.js"></script>
Add Package
yarn add choices.js --save
Remove Package
yarn remove choices.js or you can remove package by removing
specific package from package.json
Examples:
| Title |
HTML |
| Default Choice |
<select class="form-control" data-choices name="choices-single-default">
<option value="">This is a placeholder</option>
<option value="Choice 1">...</option>
<option value="Choice 2">...</option>
</select>
|
| Option Groups |
<select class="form-control" data-choices data-choices-groups data-placeholder="Select City" name="choices-single-groups">
<option value="">Choose a city</option>
<optgroup label="UK">
<option value="London">London</option>
<option value="Manchester">Manchester</option>
<option value="Liverpool">Liverpool</option>
</optgroup>
<optgroup label="Country">
<option value="...">...</option>
<option value="...">...</option>
<option value="...">...</option>
</optgroup>
</select>
|
| Options added with no search |
<select class="form-control" name="choices-single-no-search" data-choices data-choices-search-false data-choices-removeItem>
<option value="Zero">Zero</option>
<option value="One">One</option>
<option value="...">...</option>
</select>
|
| Options added with no sorting |
<select class="form-control" name="choices-single-no-sorting" data-choices data-choices-sorting-false>
<option value="Madrid">Madrid</option>
<option value="Toronto">Toronto</option>
<option value="Vancouver">Vancouver</option>
<option value="London">London</option>
<option value="Manchester">Manchester</option>
<option value="...">...</option>
</select>
|
| Default Multiple Select |
<select class="form-control" data-choices name="choices-multiple-default" multiple>
<option value="Choice 1" selected>Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="...">...</option>
<option value="..." disabled>...</option>
</select>
|
| Multiple Select with remove button |
<select class="form-control" data-choices data-choices-removeItem name="choices-multiple-remove-button"multiple>
<option value="Choice 1" selected>Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="...">...</option>
</select>
|
| Multiple Select with options group. |
<select class="form-control" name="choices-multiple-groups" data-choices data-choices-multiple-groups="true" multiple>
<option value="">Choose a city</option>
<optgroup label="UK">
<option value="London">London</option>
<option value="Manchester">Manchester</option>
<option value="Liverpool">Liverpool</option>
</optgroup>
<optgroup label="Country">
<option value="...">...</option>
<option value="...">...</option>
<option value="...">...</option>
</optgroup>
</select>
|
|
Choices select limit with text input & removebutton
|
<input class="form-control" data-choices data-choices-limit="your required limit" data-choices-removeItem type="text"value="Task-1" />
|
| Choices unique value only, no pasting |
<input class="form-control" data-choices data-choices-text-unique-true type="text" value="Project-A, Project-B" />
|
| Choices with disable option |
<input class="form-control" data-choices data-choices-text-disabled-true type="text" value="josh@joshuajohnson.co.uk, joe@bloggs.co.uk" />
|
