带增量搜索的 Mat 选择下拉菜单答案

【问题标题】：Mat select dropdown with incremental search带增量搜索的 Mat 选择下拉菜单
【发布时间】：2019-02-24 18:16:39
【问题描述】：

我有一个垫子选择下拉菜单下拉列表中的数据是从 API 获取的，因此它是一个对象数组。我希望这个下拉列表是可编辑的，它应该为我提供过滤器自动完成功能。例如：数组 = ['Ram'、'Harry'、'Sameer']。如果用户输入'R'，它应该过滤掉所有以'R'开头的选项，所以它应该过滤掉'Ram'，（它不应该在单词之间搜索'R'，其他单词中有字母'R'它们，但不应该被过滤掉），所以当用户继续输入时，选项应该被过滤掉。关于我如何做到这一点的任何建议？

【问题讨论】：

请编辑帖子并添加一些代码。
为什么不能使用mat自动补全？

标签： angular

【解决方案1】：

您可以使用ngx-mat-select-search 组件，它会在您的下拉列表中添加一个搜索字段。如果需要，您还可以通过 css 隐藏搜索输入。示例：

<mat-select [formControl]="bankCtrl">
    <ngx-mat-select-search [formControl]="bankFilterCtrl"></ngx-mat-select-search>
    <mat-option *ngFor="let bank of filteredBanks | async" [value]="bank">
      {{bank.name}}
    </mat-option>
</mat-select>

然后您使用bankFilterCtrl 的值来过滤filteredBanks 中的选项列表

【讨论】：

【解决方案2】：

使用Mat Autocomplete (adding custom filter)

查看以上链接

改变ts的过滤功能

private _filter(value: string): string[] {
 const filterValue = value.toLowerCase();

 return this.options.filter(option => option.toLowerCase().includes(filterValue));
}

到

private _filter(value: string): string[] {
 const filterValue = value.toLowerCase();

 return this.options.filter(option => option.toLowerCase().startsWith(filterValue));
}

【讨论】：