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

Category: Form , Javascript | May 2, 2021
Author: sidneywm
Views Total: 147 views
Official Page: Go to website
Last Update: May 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. Available 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,
})

Changelog:

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

You Might Be Interested In:


Leave a Reply