#ember-power-select, How to set a preselected value in ember-power-select custom-search action

Question

There must be a value set in "selected" attribute before typing in search parameter".Can anyone help me to sort this out ? #ember-power-select

It is working with normal action-handling by setting a value for "destination" in js and assigning "destination" to "selected". Have a look at here for such examples http://www.ember-power-select.com/docs/action-handling.

But can't assign a value for custom-serach-action http://www.ember-power-select.com/docs/custom-search-action.

My Code:

Models:

• hpqualifcation.js

  import DS from 'ember-data';
    export default DS.Model.extend({
    type_name: DS.attr('string'),
    hoprofile: DS.belongsTo('hoprofile')
  });
  

• hoprofile.js

  import DS from 'ember-data';
  export default DS.Model.extend({
    name: DS.attr('string'),
    hpqualification: DS.hasMany('hpqualification')
  });
  

Route:

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params){
    return Ember.RSVP.hash({
      hpqualifications: this.store.query('hpqualification', {username: params.username}),
      …
   });
  }
})

Data from API side:

{
  "hpqualification": [
    {
        "id": 1,
        "type_name": "UG",
        "hoprofile": 1
    },
    {
        "id": 1,
        "type_name": "PG",
        "hoprofile": 2
    }
  ],
  "hoprofile": [
    {
        "id": 1,
        "name": "silicon guy",
        "hpqualifications": [1]
    },
    {
        "id": 2,
        "name": "power star",
        "hpqualifications": [2]
    }
  ]
}

Templates:

Used ember-power-select custom-search-action, where the request will be sent to API side for typing each letter and the data returned will be displayed in select box options http://www.ember-power-select.com/docs/custom-search-action

{{#each model.hpqualifications as |hpqualification|}}
  {{#power-select
    selected=hpqualification.hoprofile.name
    search=(action "hoProfile")
    onchange=(action (mut hpqualification.hoprofile.name))
    as |repo|
  }}
    {{repo.name}}
     {{/power-select}}
    {{/each}}
  {{/power-select}}
{{/each}}

Components:

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    hoProfile(term){
      if (Ember.isBlank(term)) { return []; }

      const url = `//localhost:3000/betaweb/filters/hoprofiles?  name=${term}`;
      return Ember.$.ajax({ url }).then(json => json.hoprofiles);
    }
  }
});

Data returned for power-select action:

{
  "hoprofiles": [{
    "id": 7,
    "name": "silicon guy"
  }, {
    "id": 14,
    "name": "power star"
  }]
}

Everything is working fine. But in ember-power-select the preselected value is not getting selected. The select box is blank before typing in search parameter . normally using the below code the value is visible

{{#each model.hpqualifications as |hpqualification|}}
 <label>HO Profile Name<label>
 <li> {{input value=hpqualification.hoprofile.name}} </li>
{{/each}}

It displays all the data that is returned from API side.

HO Profile Name
- silicon guy
- power star 

But when i use ember-power-select the data is not getting preselected in select box. I have tried many ways but it didn’t sort me out. Can anyone please get me a solution or an alternate way to do this using power-select ?

Answer 1

For prefilled data, you need to specify the options property as well. From the docs:

"You can provide both options and a search action. Those options will be the initial set of options, but as soon as the user performs a search, the results of that search will be displayed instead."

Just make sure that the list you pass to the options is also formatted the same as the search results, in other words array of objects with a "name" attribute.

As for pre-selected object, your selected property needs to also be an object with a "name" attribute. In your case selected=hpqualification.hoprofile.