A multi-select component for CanJS

Demo

Here is a JSBin demo.

Installation

npm install multi-select --save

You can use any of the builds in the dist folder to meet your project needs.

Using CanJS's built-in support for StealJS, you can now import the module directly inside your templates. For example:

<can-import from="multi-select"/>

<multi-select select-all>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3" selected>Three</option>
</multi-select>

<multi-select select-all="default" selected-values="{selectedValues}">
  {{#each items}}
    <option value="{{value}}">{{text}}</option>
  {{/each}}
</multi-select>

<multi-select list="{items}" selected-items="{selectedItems}"></multi-select>

<multi-select list="{items}"
              value-prop="id"
              text-prop="name"
              selected-prop="isChecked"
              selected-items="{selectedItems}"
              select-all></multi-select>

<multi-select select-all
              all-selected-value="-1"
              {^selected-values}="selectedValues"
              {^are-all-selected}="areAllSelected">
  <option value="-1">All</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3" selected>Three</option>
</multi-select>

With all-selected-value set the _selectedValues_ will result in _[-1]_.

API

• list: a list of items to use if no tags are rendered inside the component.
• selected: an array of selected items as objects with value and text properties.
• selected-values: an array of selected values.
• selected-items: an array of selected items if items are passed as list.
• are-all-selected: boolean, true if all options are selected.

Options:

• select-all: show "Select All" option. If value "default" is passed then all options will be preselected.
• select-all-text: string to be shown for "Select All" option.
• all-selected-text: string to be shown when all items are selected.
• all-selected-value: a value to be returned when all options are selected (e.g. if its -1, then selectedValues will result in [-1]).
• value-prop: property name to look up for value.
• text-prop: property name to look up for text.
• selected-prop: property name to look up to check if item should be preselected.

Contributing

Pull requests are welcome.

Authors

• Marshall Thompson
• Ilya Fadeev