在角度材料中的 mat-multiple 选择中添加搜索功能

Question

我想在我的垫子多选下拉列表中添加搜索功能。 我在 Jquery 中做过这件事，但我想在 Angular 材料中做同样的事情。 这是设计图片。 Here is the image

Answer 1

在stackblitz试试这个例子

stackblitz example with angular 8

在您的 html 文件中

 <h2>Multiple selection</h2>
  <p>
    <mat-form-field>
      <mat-select [formControl]="bankMultiCtrl" placeholder="Banks" [multiple]="true">
        <mat-select-search [formControl]="bankMultiFilterCtrl"></mat-select-search>
        <mat-option *ngFor="let bank of filteredBanksMulti | async" [value]="bank">
          {{bank.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </p>
  <p>
    Selected Banks: 
  </p>
  <ul *ngFor="let bank of bankMultiCtrl?.value">
    <li>{{bank.name}}</li>
  </ul>

Answer 2

问题是材料选择没有输入功能。因此，您需要做一些 css 以使其看起来不错。

<mat-select multiple>

  <mat-form-field>
    <input matInput placeholer="Search" (input)="filterOptione($event.target.value)" />
  </mat-form-field>

  <mat-option *ngFor="let option of options" [value]="option">
    {{option}}
  </mat-option>


</mat-select> 

过滤功能：

public filterOptions(filter: string): void {
 this.options = this._unfilteredOptions.filter(x => x.toLowerCase().includes(filter.toLowerCase()));
}

Answer 3

不要使用 mat-select，而是使用 mat-autocomplete。 https://material.angular.io/components/autocomplete/overview

您可以通过在输入为空白时使用所有值填充它来使其与 mat-select 相同，然后在输入值更改时过滤自动完成选项。

同样，诀窍是让它在输入为空时显示所有可用选项。

希望这会有所帮助。

编辑：

我应该补充一点，我使用 mat-chip-list (https://material.angular.io/components/chips/overview) 作为等式的多选部分。选择一个选项后，将其添加到芯片列表中，您可以在每个芯片上添加 X 图标以从列表中删除。

当然，这是我个人对多选输入的看法，但我认为它可能会给你一些想法。

Answer 4

我对此解决方案的方法如下： 我从具有许多参数的对象数组中填充了mat-option。当然，我只使用了一个或 2 个参数来显示，但我希望我的用户通过对象的任何值来搜索，即使是 mat-option 中未显示的参数值，所以，在模板中我创建了一个像下面这样的输入字段

  <mat-form-field>
    <mat-select multiple>

        <input matInput placeholer="Search" (input)="search($event)" />
      <mat-option *ngFor="let d of data" [value]="d">
        {{d}}
      </mat-option>
    
    
    </mat-select> 
 </mat-form-field>

在.ts 文件中：

AllData:any[]; //of course the type will be the type of your data.

Search(event: any, PropertyToSearch: string)
  {
    this.data = this.AllData.filter(x =>
    {
      for (let v of String(event.target.value).trim().split(" "))
      {
        if (Object.values(x).join(" ").toLowerCase().includes(v.toLowerCase()))
          return true;
      }
      return false;
    });
  }

在这个函数中，我创建了一个用户输入的单词数组，并将data 数组中每个对象的所有值连接起来，并在连接的字符串中搜索每个单词。我为什么这样做？因为有一种情况是用户错误地在 2 个单词之间添加了 2 个空格，例如“word1 word2”。

如果我使用简单的解决方案，例如

this.AllData.filter(x => x.toLowerCase().includes(event.target.value.toLowerCase()));

并且用户写的单词之间只有一个空格，匹配的结果将不会显示。此外，我的解决方案让用户使用他记得要搜索的任何值。