Choices

  1. Forms
  2. Choices
OverviewOfficial Website

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="{% static 'libs/choices.js/public/assets/scripts/choices.min.js' %}"></script>
Note
Choices js file is loaded in <script src="{% static 'js/plugins.js'%}"></script>.
Initjs (Custom js)
<!-- app js -->
<script src="{% static '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" />
© Velzon.
Design & Develop by Themesbrand