【问题标题】:Adding search functionality in mat-multiple select in angular material在角度材料中的 mat-multiple 选择中添加搜索功能
【发布时间】:2019-11-07 11:17:12
【问题描述】:

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

【问题讨论】:

标签: javascript html angular angular-material


【解决方案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>

【讨论】:

  • 这是在 Angular2 mate 中,我正在 angular7 中制作这个
  • @RohitSoni 这里是角度 5。它也适用于角度 7。试试看
  • @RohitSoni 这里更新的答案是 Angular 8 版本。与角度 7 也没有区别。请使用必要的节点包并使用 @ViewChild('singleSelect', {static: false}) singleSelect: MatSelect; 角度为 8。
  • @RohitSoni 您的问题解决了吗,还是您想要确切的 Angular 7 项目?
  • @dasunse 可以添加全选选项。
【解决方案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()));
}

【讨论】:

  • 缺少搜索功能
  • @RohitSoni 试试这个。我认为这也将起作用。当您清除搜索键是否为空时,显示所有列表。
【解决方案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 图标以从列表中删除。

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

【讨论】:

  • 它不起作用,因为我需要选择多个而不是一个,为此,我需要选择多个值并将其存储在一个数组中
  • 我打算创建一个示例来说明我的意思,但发现 Angular Material 文档与我的想法非常接近 - stackblitz.com/angular/… 在芯片示例 - 芯片自动完成中找到它
  • 谢谢,正是我想要的!遗憾的是,如果不使用第三方库,就无法立即找到一个好的示例。
【解决方案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()));

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-12-13
    • 2019-07-16
    • 2019-09-17
    • 1970-01-01
    • 2016-10-22
    • 1970-01-01
    • 1970-01-01
    • 2016-10-18
    相关资源
    最近更新 更多