MultiSelect

MultiSelect will render checkboxes on desktop and it will render "button-like" options on mobile.

Example Usage

HTML

<div class='categories'></div>

JavaScript

// Pull in the library
const UI = require('jibe-juice');

// Instantiate a component, pass the selector of the container to insert component into and the opts
const categories = new UI.MultiSelect('.categories', {
  options: [
    {
      displayName: 'Marketing',
      value: 'mrkt01',
      count: 5
    },
    {
      displayName: 'Sales',
      value: 'sales',
      count: 9
    },
    {
      displayName: 'Engineering',
      value: 'eng-2015',
      count: 43
    },
    {
      displayName: "It's an apostrophe test",
      value: "It's an apostrophe test",
      count: 200
    },
    {
      displayName: '"Quote test"',
      value: '"Quote test"',
      count: 200
    }
  ],
  renderItem: function (item) {
    return item.displayName + ' (' + item.count + ')';
  }
});


// Subscribe to fire this function whenever the selected options change
categories.subscribe((choice) => {
  console.log('New Category kiiii!', choice);
  categories.render();
});

// Render the DOM for the MultiSelect component
categories.render();

params

Name	Type	Default	Description
el	string	undefined	A string of the selector for the element to put the component in
opts	object	{}	A catch all for various options. See the opts table below for options specific to this component.

opts

Name	Type	Default	Description
displayNameKey	string	'displayName'	A string indicating the index of the displayName property
renderItem	function	this.renderItem	A function to render each item