使用 ng-multiselect-dropdown 过滤并仅显示以输入字符开头的选项

【问题标题】：Filter with ng-multiselect-dropdown and show only those options which starts with the entered characters使用 ng-multiselect-dropdown 过滤并仅显示以输入字符开头的选项
【发布时间】：2020-09-22 13:00:15
【问题描述】：

我正在使用具有以下设置的 ng-multiselect-dropdown：

this.countryDropdownSettings = {
      singleSelection: true,
      idField: 'level0_id',
      textField: 'country',
      selectAllText: 'Worldwide',
      unSelectAllText: 'Worldwide',
      itemsShowLimit: 3,
      allowSearchFilter: true,
      closeDropDownOnSelection: true
    };

搜索时，所有选项都会显示包含输入字符的选项。我只想建议那些仅以输入的字符开头的内容。例如，如果我输入“I”，则应仅显示印度、意大利，但此处不会显示澳大利亚。

我已经搜索了可用的选项，但没有找到任何合适的设置。

【问题讨论】：

标签： angular dropdown multi-select

【解决方案1】：

ng-multiselect-dropdown 使用管道来获取过滤结果，所以这并不容易，但你可以有两个数组，data 和 dataFiltered 并使用事件 onFilterChange

<ng-multiselect-dropdown #multiSelect
      <!--see that you use "dataFiltered"
      [data]="dataFiltered" 
      ...
      (onFilterChange)="onFilterChange($event)"
</ng-multiselect-dropdown>

你有，例如

  public data = [..your array of object...];
  public dataFiltered=this.data;

  public onFilterChange(item: any) {
    if(!item)
       this.dataFiltered=this.data;
    else
    {
       item=item.toLowerCase();
       this.dataFiltered=this.data.filter(x=>x.countryName.toLowerCase()
          .indexOf(item)==0)
    }
  }

好吧，我写countryName，你需要把你要过滤的属性放在里面

是的有点奇怪，但这是我唯一能想象的:(

【讨论】：