0

I have tried everything with ember-power-select addon. But I'm not able to implement multi-select with ember-power-select. I need to select multiple options for a single group.

Is it Possible?

rinold simon
  • 2,782
  • 4
  • 20
  • 39
Srisainath Jilakara
  • 171
  • 1
  • 1
  • 4

2 Answers2

2

Yes, Ember Power Select has a feature of multiple selection.

You need to use {{#power-select-multiple}}. The component accepts an array of values and the selected values (by default) will be listed in the component side by side.

{{#power-select-multiple
  options=names
  selected=name
  placeholder="Select some names..."
  onchange=(action (mut name))
  as |name|
}}
  {{name}}
{{/power-select-multiple}}

You can check the feature and adapt it to what you want to achieve in the official docs: https://ember-power-select.com/docs/multiple-selection

LucasNesk
  • 183
  • 8
  • The above code doesnt bring the concept of Group with options – Srisainath Jilakara Apr 10 '19 at 14:14
  • 1
    Hello @SrisainathJilakara , have you tried to use a grouped list of options in this example, just like you may have done in the single selection example? It's important for us to know what you may have already done, so we can focus on the part you haven't explored yet! – LucasNesk Apr 10 '19 at 14:17
0

You might need to use grouped option with power-select-multiple.

hbs:

{{#power-select-multiple
  options=groupedNumbers
  selected=number
  placeholder="Select some numbers..."
  onchange=(action (mut number))
  as |number|
}}
  {{number}}
{{/power-select-multiple}}

js:

groupedNumbers: [
  { groupName: 'Smalls', options: ['one', 'two', 'three'] },
  { groupName: 'Mediums', options: ['four', 'five', 'six'] },
  { groupName: 'Bigs', options: [
    { groupName: 'Fairly big', options: ['seven', 'eight', 'nine'] },
    { groupName: 'Really big', options: [ 'ten', 'eleven', 'twelve' ] },
    'thirteen'
  ] },
  'one hundred',
  'one thousand'
]
rinold simon
  • 2,782
  • 4
  • 20
  • 39