En-select NPM | npm.io

en-select

Simple select component written in ember.js without any external dependencies.

Usage

There are two components: en-select and en-multi-select.

en-select creates a select component that allows a single selection. en-multi-select creates a select component that allows multiple selections.

Here's an example:

  {{en-select label="Placeholder"
              options=options
              on-select=(action "some-action")}}

By default, it expects the options you pass to have id and label properties. You can also specify a custom path for them. Here's an example.

  {{en-select label="Placeholder"
              options=options
              optionValuePath="name"
              optionLabelPath="text"
              on-select=(action "some-action")}}

On selection, the on-select action is called with the selected object.

If you want only the ID—and not the object—you can do this:

  {{en-select label="Placeholder"
              options=options
              optionValuePath="name"
              optionLabelPath="text"
              on-select=(action (mut someValue) value="id")}}

This will set someValue to the id of the selected object.

Advanced Usage

<<<<<<< HEAD en-select can be used in the block form as well, like so:

  {{#en-select options=options on-select="some-action" as |option|}}
    {{option.label}}
  {{/en-select}}

You can also customize what shows up when no options are available (i.e. the options you pass in is an empty array, or what the user searched for has no results available). Here's how:

  {{#en-select options=options on-select="some-action" as |option|}}
    {{option.label}}
  {{else}}
    <h5>No results found</h5>
  {{/en-select}}

Options

Option	Type	Default	Explanation
isDisabled	boolean	false	Disables the select component, adds a `is-disabled` class.
disableSearch	boolean	false	Hides the search box if set to `true`
canRemoveSelection	boolean	true	Allows the user to cancel the selection
label	string	null	Acts as the placeholder when nothing is selected
options	array	[]	An array of the list items that you want to render
value	object/string	null	The current selection

Actions

Action	Explanation
on-select	When an option is selected, `on-select` action is triggered
on-focus	When an option gets focus, `on-focus` action is triggered
on-remove	When an option is removed, `on-remove` action is triggered