Question

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

Answer 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中的选项列表

Answer 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));
}

垫选择下拉菜单进行增量搜索

2 个答案: