Dynamic jQuery Multi Select / Tags Input Plugin - Fast Select

Fast Select is a simple, fast, fully customizable jQuery plugin for enhancing the default select box and input field that provides endless features like searching, filtering, tagging, single-select, multi-select, autocomplete and dynamic AJAX content.

How to use it:

1. Include the jQuery fast select plugin's files on the webpage. Be sure to include the fastselect.js script after jQuery library.

<link rel="stylesheet" href="dist/fastselect.min.css">
  ...
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/fastselect.js"></script>

2. Create a basic multi select box that loads data from option values.

<select class="multipleSelect" multiple name="language">
    <option value="Afghanistan">Afghanistan</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="Andorra">Andorra</option>
    <option value="Angola">Angola</option>
    ...
</select>

3. Create a dynamic tags input that loads data from an external JSON file.

<input type="text" multiple class="demo" data-url="data.json" name="language">

$('.demo').fastselect();

4. Create a dynamic tags input where options passed via data attributes.

<input
    type="text"
    multiple
    class="demo"
    value="Algeria,Angola"
    data-initial-value='[{"text": "Algeria", "value" : "Algeria"}, {"text": "Angola", "value" : "Angola"}]'
    data-url="data.json"
    data-load-once="true"
    name="language">

$('.demo').fastselect();

5. All configuration options.

elementClass: 'fstElement',
singleModeClass: 'fstSingleMode',
noneSelectedClass: 'fstNoneSelected',
multipleModeClass: 'fstMultipleMode',
queryInputClass: 'fstQueryInput',
queryInputExpandedClass: 'fstQueryInputExpanded',
fakeInputClass: 'fstFakeInput',
controlsClass: 'fstControls',
toggleButtonClass: 'fstToggleBtn',
activeClass: 'fstActive',
itemSelectedClass: 'fstSelected',
choiceItemClass: 'fstChoiceItem',
choiceRemoveClass: 'fstChoiceRemove',
userOptionClass: 'fstUserOption',

resultsContClass: 'fstResults',
resultsOpenedClass: 'fstResultsOpened',
groupClass: 'fstGroup',
itemClass: 'fstResultItem',
groupTitleClass: 'fstGroupTitle',
loadingClass: 'fstLoading',
noResultsClass: 'fstNoResults',
focusedItemClass: 'fstFocused',

matcher: null,
maxItems: false,
maxItemsReached: null,

url: null,
loadOnce: false,
apiParam: 'query',
initialValue: null,
clearQueryOnSelect: true,
minQueryLength: 1,
focusFirstItem: false,
typeTimeout: 150,
userOptionAllowed: false,
valueDelimiter: ',',

parseData: null,
onItemSelect: null,
onItemCreate: null,

placeholder: 'Choose option',
searchPlaceholder: 'Search options',
noResultsText: 'No results',
userOptionPrefix: 'Add '

Change logs:

2017-02-22

• v0.7.3: JS update

2017-01-25

• v0.7.2: Adjust choice item text generation

2017-01-25

• v0.7.1: display options as soon as possible when user option input is allowed

2016-10-04

• v0.7.0: display options as soon as possible when user option input is allowed

2016-08-24

• Adjust demo docs and api options

2016-08-23

• added maxItems and maxItemsReached functionality

2016-08-19

• Update options to forward "focusFirstItem" to fastsearch engine

2016-07-29

• enable user to set custom options / tags

2016-03-11

• UMD support

2015-12-23

• v0.2.3

2015-12-14

•  adjusted handling of numerical values

2015-11-22

• noResultsText option passed to fastsearch

2015-11-06

• clear query on select as default option

---

This awesome jQuery plugin is developed by dbrekalo. For more Advanced Usages, please check the demo page or visit the official website.