如何在角材质的多选下拉菜单中实现搜索功能

Question

我正在开发一个项目，我需要使用多选下拉菜单来实现搜索。当我添加下面的代码时，我可以搜索，但我之前选择的值在新搜索后消失了。

下面是代码片段。

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

你能帮我吗？

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

Stackblitz 演示

也就是说，不确定我是否会自己实现此类功能，因为这里有很多边缘情况。您可能应该使用现有的库来执行此操作。

Answer 2

感谢迄今为止为该主题做出贡献的所有人。我发现提供的解决方案很有帮助，但我遇到了一些无法解决的问题。

第一个问题是我无法搜索包含空格的选项。当我尝试在搜索输入中输入空格时，它会触发选择或取消选择选项。这使得很难找到名称中包含空格的特定选项。

第二个问题是，如果我选择一个选项然后更改搜索输入，则之前选择的任何与搜索条件不匹配的选项都将被取消选择。这是有问题的，因为这意味着每次更改搜索输入时我都必须重新选择选项。

经过一些实验，我找到了解决这些问题的解决方案

您可以在这个 StackBlitz 示例中看到该解决方案的实际应用

我希望这对可能遇到类似问题的其他人有所帮助。再次感谢所有为该主题做出贡献的人！

Answer 3

谢谢你。我也遇到了空格键的问题，并且 event.stopPropagation() 解决了问题。

在我的实现中，将搜索字段集中在下拉菜单打开并在搜索字段中添加空格时保持焦点的相关部分是这样的：

打字稿：

  focusSearchField(event: any) {
    this.searchInput.nativeElement.focus();
    // prevent space in search field ticking the checkbox instead of typing a space
    if (event?.code === 'Space') { event.stopPropagation(); } 
  }

html:

<mat-form-field>
    <mat-select formControlName="fcMulti" multiple
        (openedChange)="focusSearchField($event)"
        (selectionChange)="onSelection($event.value)">
        ....
            <div fxFlex="60%" class="search-input">
                <input #searchInput type="text" matInput (keydown.space)="focusSearchField($event)" (keyup)="applyFilter($event.target.value)">
            </div>
            ....