angular - 如何在角度材料的多选下拉菜单中实现搜索功能
问题描述
我正在开发一个需要使用多选下拉菜单实现搜索的项目。当我添加下面的代码时,我可以搜索,但我之前选择的值在新搜索后消失了。
下面是代码片段。
HTML:
<mat-form-field appearance="fill">
<mat-label>Providers</mat-label>
<mat-select multiple [formControl]="providers">
<mat-select-trigger>
{{providers.value }}
</mat-select-trigger>
<input type="text" autocomplete="off" matInput placeholder="Search By Provider" #multiUserSearch (
input)="onInputChange()">
<mat-option *ngFor="let provider of provider " [value]="provider.PROV">{{provider.PROV}}
</mat-option>
</mat-select>
TS文件:
onInputChange(){
console.log(this.multiUserSearchInput.nativeElement.value);
const searchInput=this.multiUserSearchInput.nativeElement.value?
this.multiUserSearchInput.nativeElement.value.toLowerCase():'';
this.provider=this._provider.filter(u=>{
const PROV:string=u.PROV.toLowerCase().;
return PROV.indexOf(searchInput) > -1;
});
}
你能帮我么。
解决方案
由于您使用过滤列表向下拉列表提供值,因此一旦该过滤列表不再包含该值,它就会重置。
使用您的代码,您可能应该使用以下内容:
HTML:
<mat-form-field appearance="fill">
<mat-label>Providers</mat-label>
<mat-select multiple [formControl]="providers" (openedChange)="onOpenChange(multiUserSearch)">
<mat-select-trigger>
{{providers.value }}
</mat-select-trigger>
<input #multiUserSearch type="text" autocomplete="off" matInput placeholder="Search By Provider" (input)="onInputChange($event)"/>
<mat-option *ngFor="let provider of filteredProviders" [value]="provider.PROV">{{provider.PROV}}</mat-option>
</mat-select>
</mat-form-field>
零件:
export class SelectMultipleExample {
providers = new FormControl();
allProviders: any[] = [{ PROV: "aaa" }, { PROV: "aab" }, { PROV: "aac" }];
filteredProviders: any[] = this.allProviders;
onInputChange(event: any) {
const searchInput = event.target.value.toLowerCase();
this.filteredProviders = this.allProviders.filter(({ PROV }) => {
const prov = PROV.toLowerCase();
return prov.includes(searchInput);
});
}
onOpenChange(searchInput: any) {
searchInput.value = "";
this.filteredProviders = this.allProviders;
}
}
也就是说,我不确定我自己会实现这样的功能,因为这里有很多边缘情况。您可能应该使用现有的库来执行此操作。
推荐阅读
- reactjs - Nodify 模式在 nebula.gl 的 editableGeojsonLayer 中不起作用
- java - 如何在不影响数组中其他值的情况下操作可变 NaturalNumber 数组?
- spring-boot - 如何在 WebDAV Server 中实现协作?
- amazon-web-services - 具有不同路径的单个域路由到不同的 nginx 服务器
- postgresql - Dash 应用程序连接到 AWS postgres DB 非常慢
- django - 在 azure 活动目录中访问多个 api 的最佳实践是什么
- swift - 如何制作带有图像的按钮?
- python - Python Regex 匹配浮点数一定次数
- android - 两个按钮的单个活动回收器视图
- mongodb - 如何在猫鼬的嵌套数组中插入文档