Dynamic jQuery Multi Select / Tags Input Plugin – Fast Select

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">

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">

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 '

 

Demo     Download

Dynamic jQuery Multi Select / Tags Input Plugin – Fast Select

| CSS3, HTML5, Javascript, jQuery Plugins, jQuery UI, Twitter Bootstrap Framework | 0 Comments
About The Author
- Thank you for visiting my profile page. I have over 8+ years experience in web development. Product quality, Client service, and results are my priority. I offer unparalleled expertise and services in web design and front-end development, including responsive websites (Using Twitter bootstrap framework) and Hybrid Mobile Application (Using IONIC Framework) . I am proficient in a wide spectrum of technologies and learn new ones fast. I am seeking new opportunities to design, build and extend websites and web applications.