[英]How to implement search functionality in multi select drop down of angular material
我正在做一個項目,我需要使用多 select 下拉菜單來實現搜索。 當我添加下面的代碼時,我可以搜索,但我之前選擇的值在新搜索后消失了。
下面是代碼片段。
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;
});
}
你能幫我么。
由於您使用過濾列表向下拉列表提供值,因此一旦該過濾列表不再包含該值,它就會重置。
使用您的代碼,您可能應該使用 go 類似的內容:
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;
}
}
也就是說,我不確定我自己會實現這樣的功能,因為這里有很多邊緣情況。 您可能應該使用現有的庫來執行此操作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.