如何使用ember-power-select搜索姓名或电子邮件

时间:2020-04-20 14:29:56

标签: ember.js ember-data ember-cli

我正在使用一个名为ember-power-select的插件。

Github:https://github.com/cibernox/ember-power-select

搜索文档:https://ember-power-select.com/docs/the-search

多选文档:https://ember-power-select.com/docs/multiple-selection/

问题:如何使用nameemail

进行搜索

/template.hbs

<PowerSelectMultiple
  @searchEnabled={{true}}
  @options={{this.authors}}
  @selected={{this.author}}
  @searchField="email"
  @placeholder="Select some names..."
  @onChange={{fn (mut this.author)}} as |author|>
  {{name}}
</PowerSelectMultiple>

/controller.js

 authors = [
    { name: 'Foo', email: 'foo@gmail.com' },
    { name: 'Bar', email: 'bar@gmail.com'},
    { name: 'Baz' email:  'baz@gmai.com'}
  ]

1 个答案:

答案 0 :(得分:4)

// controller .js

authors = [
    { name: 'Foo', email: 'foo@gmail.com' },
    { name: 'Bar', email: 'bar@gmail.com'},
    { name: 'Baz' email:  'baz@gmai.com'}
  ]
  
 // add below method you can do something like this
searchMethod(term) {
   let result = '';
   result = this.authors.filter((item)=>{
     if(term == item.name || term == item.email){
     return true;
   });
   return result;
  }
/*template.hbs */

<PowerSelectMultiple
  @searchEnabled={{true}}
  @options={{this.authors}}
  @selected={{this.author}}
  @search={{this.searchMethod}}  /* add @search */
  @searchField="email"
  @placeholder="Select some names..."
  @onChange={{fn (mut this.author)}} as |author|>
  {{name}}
</PowerSelectMultiple>

You can refer this link from Power-select DOC's

我不确定searchMethod的返回类型,可以检查power-select lib并相应地对其进行自定义。