Author: | sidneywm |
---|---|
Views Total: | 2,067 views |
Official Page: | Go to website |
Last Update: | October 2, 2021 |
License: | MIT |
Preview:

Description:
A simple-to-use, easy-to-config, and cross-browser multiple select components built on top of Vanilla JavaScript. Works with the native HTML select box.
It converts selected options into ‘chips’ (also called tokens) that can be removed by clicking the ‘X’.
How to use it:
1. Insert the Iconic Multiselect’s JavaScript into the document.
<!-- With IE 11 Polyfills --> <script src="multi-select-ie11-polyfills.min.js"></script> <!-- Without IE 11 Polyfills --> <script src="multi-select.min.js"></script>
2. Create a new instance of the Iconic Multiselect.
<select id="example"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> ... </select>
var multiSelect = new IconicMultiSelect({ select: "#example", })
3. Initialize the Iconic Multiselect and done.
multiSelect.init();
4. You can also define the options in an array of objects as follows:
var multiSelect = new IconicMultiSelect({ data: [ { id: 1, item: 'Option 1'}, { id: 2, item: 'Option 2'}, { id: 3, item: 'Option 3'} ], textField: 'item', valueField: 'id', })
5. More configurations.
var multiSelect = new IconicMultiSelect({ // placeholder text placeholder: "Select... ", // message to show if no data noData: "No data found. ", // message to show if no results noResults: "No results found.", })
6. Listen to the option changes.
multiSelect.subscribe(function(e) { console.log(e); });
7. Determine whether to inject CSS in the <head> tag. Default: false.
var multiSelect = new IconicMultiSelect({ customCss: true, })
8. Customize the tag & item templates.
var multiSelect = new IconicMultiSelect({ tagTemplate: null, itemTemplate: null, })
Changelog:
v0.6.1 (10/02/2021)
- Removed private methods causing issues with IE
v0.6.0 (09/18/2021)
- Removed injection of CSS
- Added tagTemplate & itemTemplate options
- Fix multiple intsance not working
- Set methods to private
- prevent scroll of window
v0.5.0 (07/28/2021)
- Removed polyfills – No polyfills needed anymore
- Changed cross with an SVG
- Bug fixes
v0.4.0 (05/02/2021)
- Borders are set with box-shadow instead of border property
- Changed Multiselect height
- Fixed arrow-selected border property not showing in IE11
- Fixed Event click on items not fired on initialization of the component in IE11
v0.3.3 (05/01/2021)
- Fix incorrect output when filtering options
v0.3.2 (04/30/2021)
- Fixed: Input height not consistent
04/29/2021
- Fixed class arrow-selected was not remove when popup list close
Hi Team,
Your dropdown search is perfect working but i have one doubt that i have form, inside this form there is select option when i selected and post form then i got empty array on server side.
Please provide solution on that
Hi !
Is it possible to set default value in this select ?