Cross-browser Multi Select Component In Vanilla JavaScript – Iconic Multiselect

Category: Form , Javascript | October 2, 2021
2 Comments
Demo Download
Author:sidneywm
Views Total:1,912 views
Official Page:Go to website
Last Update:October 2, 2021
License:MIT

Preview:

Cross-browser Multi Select Component In Vanilla JavaScript – Iconic Multiselect

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

See Also:

You Might Be Interested In:

2 thoughts on “Cross-browser Multi Select Component In Vanilla JavaScript – Iconic Multiselect”

  1. ganesh suthar

    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

    Reply ↓

Leave a Reply