NgxMatSelectSearch

https://github.com/bithost-gmbh/ngx-mat-select-search

它有什么作用？

这是一个Angular组件，为Angular Material库的MatSelect选项提供一个输入字段用于搜索/过滤。

试一试

在以下链接可以看到实际效果：

https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example

查看示例代码，在浏览器中构建，最新版本，最新Material版本
https://bithost-gmbh.github.io/ngx-mat-select-search/

预构建，最新版本，较旧的Material版本，可在移动设备上运行

重要提示：本项目是https://github.com/angular/material2/issues/5697的临时实现。最终目标是在官方Angular Material仓库中实现，将创建一个新的PR。

贡献

欢迎贡献，请开启一个issue，最好提交一个pull request。

支持开发

我们致力于通过不断改进NgxMatSelectSearch并快速响应错误报告来提供最佳服务。我们完全免费提供这些服务。如果您觉得这个库对您有用，为您和您的业务节省了宝贵的时间，请考虑捐赠以支持其维护和进一步开发。

财务支持者

非常感谢我们的财务支持者！

<table> <tr> <td align="center"> <a href="https://github.com/pschulzk"> <img src="https://avatars.githubusercontent.com/u/7001048?v=4" width="100;" alt="pschulzk"/> Philip Viktor Schulz-Klingauf </a> </td></tr> </table>

协作者

<table> </table>

贡献者

非常感谢我们所有的社区贡献者！

<table> <tr> <td align="center"> <a href="https://github.com/macjohnny"> <img src="https://avatars.githubusercontent.com/u/5589029?v=4" width="100;" alt="macjohnny"/> Esteban Gehring </a> </td> <td align="center"> <a href="https://github.com/maechler"> <img src="https://avatars.githubusercontent.com/u/4113819?v=4" width="100;" alt="maechler"/> Markus Mächler </a> </td> <td align="center"> <a href="https://github.com/angelaki"> <img src="https://avatars.githubusercontent.com/u/38611461?v=4" width="100;" alt="angelaki"/> Tristan </a> </td> <td align="center"> <a href="https://github.com/tonyholt"> <img src="https://avatars.githubusercontent.com/u/893926?v=4" width="100;" alt="tonyholt"/> Tony H </a> </td> <td align="center"> <a href="https://github.com/mstawick"> <img src="https://avatars.githubusercontent.com/u/1216844?v=4" width="100;" alt="mstawick"/> Michał Stawicki </a> </td> <td align="center"> <a href="https://github.com/alexandrupaul7"> <img src="https://avatars.githubusercontent.com/u/28051061?v=4" width="100;" alt="alexandrupaul7"/> Null </a> </td></tr> <tr> <td align="center"> <a href="https://github.com/blazewalker59"> <img src="https://avatars.githubusercontent.com/u/21110755?v=4" width="100;" alt="blazewalker59"/> Blaze Walker </a> </td> <td align="center"> <a href="https://github.com/achilehero"> <img src="https://avatars.githubusercontent.com/u/14956052?v=4" width="100;" alt="achilehero"/> Cristian Raducanu </a> </td> <td align="center"> <a href="https://github.com/damianmigo"> <img src="https://avatars.githubusercontent.com/u/1733403?v=4" width="100;" alt="damianmigo"/> Damian Miranda </a> </td> <td align="center"> <a href="https://github.com/Danevandy99"> <img src="https://avatars.githubusercontent.com/u/13788320?v=4" width="100;" alt="Danevandy99"/> Dane Vanderbilt </a> </td> <td align="center"> <a href="https://github.com/escheiermann"> <img src="https://avatars.githubusercontent.com/u/39056343?v=4" width="100;" alt="escheiermann"/> Edgar Scheiermann </a> </td> <td align="center"> <a href="https://github.com/arucar"> <img src="https://avatars.githubusercontent.com/u/37804893?v=4" width="100;" alt="arucar"/> Erendis </a> </td></tr> <tr> <td align="center"> <a href="https://github.com/gustavovitor"> <img src="https://avatars.githubusercontent.com/u/37344068?v=4" width="100;" alt="gustavovitor"/> Gustavo Miranda </a> </td> <td align="center"> <a href="https://github.com/meta72"> <img src="https://avatars.githubusercontent.com/u/3915589?v=4" width="100;" alt="meta72"/> Henno Lauinger </a> </td> <td align="center"> <a href="https://github.com/himanshu-singh1995"> <img src="https://avatars.githubusercontent.com/u/29891513?v=4" width="100;" alt="himanshu-singh1995"/> 空 </a> </td> <td align="center"> <a href="https://github.com/jfcere"> <img src="https://avatars.githubusercontent.com/u/6987084?v=4" width="100;" alt="jfcere"/> Jean-Francois Cere </a> </td> <td align="center"> <a href="https://github.com/josephdecock"> <img src="https://avatars.githubusercontent.com/u/1145533?v=4" width="100;" alt="josephdecock"/> Joe DeCock </a> </td> <td align="center"> <a href="https://github.com/JomalJohny"> <img src="https://avatars.githubusercontent.com/u/43292719?v=4" width="100;" alt="JomalJohny"/> Jomal Johny </a> </td></tr> <tr> <td align="center"> <a href="https://github.com/bulldog98"> <img src="https://avatars.githubusercontent.com/u/314259?v=4" width="100;" alt="bulldog98"/> Jonathan Kolberg </a> </td> <td align="center"> <a href="https://github.com/melroy89"> <img src="https://avatars.githubusercontent.com/u/628926?v=4" width="100;" alt="melroy89"/> Melroy Van Den Berg </a> </td> <td align="center"> <a href="https://github.com/AhsanAyaz"> <img src="https://avatars.githubusercontent.com/u/9844254?v=4" width="100;" alt="AhsanAyaz"/> Muhammad Ahsan Ayaz </a> </td> <td align="center"> <a href="https://github.com/OvidijusStukas"> <img src="https://avatars.githubusercontent.com/u/9720553?v=4" width="100;" alt="OvidijusStukas"/> Ovidijus Stukas </a> </td> <td align="center"> <a href="https://github.com/qstiegler"> <img src="https://avatars.githubusercontent.com/u/2858579?v=4" width="100;" alt="qstiegler"/> Quirin Stiegler </a> </td> <td align="center"> <a href="https://github.com/raysuelzer"> <img src="https://avatars.githubusercontent.com/u/1176341?v=4" width="100;" alt="raysuelzer"/> Ray Suelzer </a> </td></tr> <tr> <td align="center"> <a href="https://github.com/probert94"> <img src="https://avatars.githubusercontent.com/u/18258317?v=4" width="100;" alt="probert94"/> Robert Pattis </a> </td> <td align="center"> <a href="https://github.com/broekema41"> <img src="https://avatars.githubusercontent.com/u/4007585?v=4" width="100;" alt="broekema41"/> Roland Broekema </a> </td> <td align="center"> <a href="https://github.com/swierzbicki"> <img src="https://avatars.githubusercontent.com/u/7196324?v=4" width="100;" alt="swierzbicki"/> Sebastian Wierzbicki </a> </td> <td align="center"> <a href="https://github.com/shenay-aydan"> <img src="https://avatars.githubusercontent.com/u/38660036?v=4" width="100;" alt="shenay-aydan"/> 空 </a> </td> <td align="center"> <a href="https://github.com/framasev"> <img src="https://avatars.githubusercontent.com/u/41595972?v=4" width="100;" alt="framasev"/> Stas Amasev </a> </td> <td align="center"> <a href="https://github.com/nischi"> <img src="https://avatars.githubusercontent.com/u/2036054?v=4" width="100;" alt="nischi"/> Thierry Nischelwitzer </a> </td></tr> <tr> <td align="center"> <a href="https://github.com/vlio20"> <img src="https://avatars.githubusercontent.com/u/4542641?v=4" width="100;" alt="vlio20"/> Vlad Ioffe </a> </td> <td align="center"> <a href="https://github.com/WX9yMOXWId"> <img src="https://avatars.githubusercontent.com/u/30053114?v=4" width="100;" alt="WX9yMOXWId"/> 无 </a> </td> <td align="center"> <a href="https://github.com/zpaynter"> <img src="https://avatars.githubusercontent.com/u/29746771?v=4" width="100;" alt="zpaynter"/> 无 </a> </td> <td align="center"> <a href="https://github.com/evoltafreak"> <img src="https://avatars.githubusercontent.com/u/11610680?v=4" width="100;" alt="evoltafreak"/> Joshua </a> </td> <td align="center"> <a href="https://github.com/lorenzbaier"> <img src="https://avatars.githubusercontent.com/u/64407215?v=4" width="100;" alt="lorenzbaier"/> 无 </a> </td> <td align="center"> <a href="https://github.com/ruekart"> <img src="https://avatars.githubusercontent.com/u/9154610?v=4" width="100;" alt="ruekart"/> 无 </a> </td></tr> </table>  ## 如何使用？

在您的项目中安装 ngx-mat-select-search：

npm install ngx-mat-select-search

在您的 app.module.ts 中导入 NgxMatSelectSearchModule：

import { MatSelectModule } from '@angular/material';
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';

@NgModule({
  imports: [
    ...
    MatSelectModule,
    NgxMatSelectSearchModule
  ],
})
export class AppModule {}

通过将 ngx-mat-select-search 组件放置在 <mat-option> 元素内，在 mat-select 元素中使用它：

<mat-form-field>
  <mat-select [formControl]="bankCtrl" placeholder="银行" #singleSelect>
    <mat-option>
      <ngx-mat-select-search [formControl]="bankFilterCtrl"></ngx-mat-select-search>
    </mat-option>
    <mat-option *ngFor="let bank of filteredBanks | async" [value]="bank">
      {{bank.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

查看 https://github.com/bithost-gmbh/ngx-mat-select-search/tree/master/src/app/examples 中的示例，了解如何连接 ngx-mat-select-search 并过滤可用选项。或者查看 https://github.com/bithost-gmbh/ngx-mat-select-search-example 以在独立应用中查看它。

模板驱动表单

您也可以在模板驱动表单中使用它，如下所示：

<ngx-mat-select-search ngModel (ngModelChange)="filterMyOptions($event)">

<ngx-mat-select-search [formControl]="bankFilterCtrl" 
                       placeholderLabel="查找银行..." 
                       i18n-placeholderLabel
                       noEntriesFoundLabel="未找到匹配的银行"
                       i18n-noEntriesFoundLabel></ngx-mat-select-search>

兼容性

当前版本

@angular/core: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
@angular/material: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 与 MatSelectModule (@angular/material/select)

版本 `6.0.0`

@angular/core: ^15.0.0
@angular/material: ^15.0.0 与 MatLegacySelectModule (@angular/material/legacy-select)

版本 `5.0.0`

@angular/core: ^12.0.0 || ^13.0.0 || ^14.0.0
@angular/material: ^12.0.0 || ^13.0.0 || ^14.0.0

版本 `3.3.3`

@angular/core: ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0
@angular/material: ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0

版本 `1.8.0`

@angular/core: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
@angular/material: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0

API

MatSelectSearchComponent 实现了 ControlValueAccessor 接口。此外，它还提供以下输入：

输入

  /** 搜索占位符的标签 */
  @Input() placeholderLabel = '搜索';

  /** 搜索输入字段的类型 */
  @Input() type = 'text';

  /** 用于显示关闭图标的基于字体的图标 */
  @Input() closeIcon = 'close';

  /** 用于显示关闭图标的基于SVG的图标。如果设置，将覆盖closeIcon */
  @Input() closeSvgIcon?: string;

/** 当未找到条目时显示的标签。如果不应显示消息，则设置为 null。 */ @Input() noEntriesFoundLabel = '未找到选项';

/**

下拉菜单关闭后是否应清除搜索字段。
对服务器端过滤很有用。参见 #3 */ @Input() clearSearchInput = true;

/** 是否显示搜索进行中的指示器 */ @Input() searching = false;

/** 禁用输入字段的初始聚焦 */ @Input() disableInitialFocus = false;

/** 启用按 Esc 键清除输入 */ @Input() enableClearOnEscapePressed = false;

/**

防止 Home / End 键传播到 mat-select，
允许在搜索输入内移动光标，而不是导航选项 */ @Input() preventHomeEndKeyPropagation = false;

/** 当选项列表变化时禁用滚动到活动选项。对服务器端搜索很有用 */ @Input() disableScrollToActiveOnOptionsChanged = false;

/** 为搜索框添加 508 屏幕阅读器支持 */ @Input() ariaLabel = '下拉搜索';

/** 是否显示全选复选框（适用于 mat-select[multi=true]） */ @Input() showToggleAllCheckbox = false;

/** 全选复选框选中状态 */ @Input() toggleAllCheckboxChecked = false;

/** 全选复选框不确定状态 */ @Input() toggleAllCheckboxIndeterminate = false;

/** 在全选复选框的工具提示中显示消息 */ @Input() toggleAllCheckboxTooltipMessage = '';

/** 定义全选复选框工具提示的位置 */ @Input() toggleAllCheckboxTooltipPosition: 'left' | 'right' | 'above' | 'below' | 'before' | 'after' = 'below';

/** 显示/隐藏搜索输入的清除按钮 */ @Input() hideClearSearchButton = false;

/**

在多选模式下始终在 selectionChange 时恢复选中的选项（例如用于懒加载/无限滚动）。
默认为 false，因此只在过滤活动时恢复选中的选项。 */ @Input() alwaysRestoreSelectedOptionsMulti = false;

/** 输出事件发射器，用于向父组件发送全选布尔值 */ @Output() toggleAll = new EventEmitter<boolean>();


#### 自定义清除图标
为了自定义搜索图标，将 `ngxMatSelectSearchClear` 添加到您的自定义清除项（一个 `mat-icon` 或任何其他元素）并将其放置在 `ngx-mat-select-search` 组件内：
```html
<ngx-mat-select-search>
   <mat-icon ngxMatSelectSearchClear>delete</mat-icon>
</ngx-mat-select-search>

如果只需要更改图标，可以使用 closeIcon 和 closeSvgIcon 输入。

自定义未找到条目元素

为了自定义未找到条目元素，将 ngxMatSelectNoEntriesFound 添加到您的自定义项（一个 mat-icon、span、button 或任何其他元素）并将其放置在 ngx-mat-select-search 组件内：

<ngx-mat-select-search>
  <span ngxMatSelectNoEntriesFound>
    未找到条目
    <button mat-button color="primary">
      添加 <mat-icon>add</mat-icon>
    </button>
</span>
</ngx-mat-select-search>

自定义内容

带有 CSS 类 mat-select-search-custom-header-content 的自定义内容可以如下嵌入：

<ngx-mat-select-search>
   <div class="mat-select-search-custom-header-content">特殊内容</div>
</ngx-mat-select-search>

全局默认选项

通过提供 MAT_SELECTSEARCH_DEFAULT_OPTIONS 注入令牌，可以全局设置 MatSelectSearchComponent 的多个 @Input() 属性的默认值。请参阅 MatSelectSearchComponent 中相应 @Input() 属性的文档。

示例：

import { MAT_SELECTSEARCH_DEFAULT_OPTIONS, MatSelectSearchOptions } from 'ngx-mat-select-search';

@NgModule({
  ...
  providers: [
    {
      provide: MAT_SELECTSEARCH_DEFAULT_OPTIONS,
      useValue: <MatSelectSearchOptions>{
        closeIcon: 'delete',
        noEntriesFoundLabel: '未找到选项',
      }
    }
  ]
})
class AppModule {}