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并快速响应错误报告来提供最佳服务。我们完全免费提供这些服务。如果您觉得这个库对您有用，为您和您的业务节省了宝贵的时间，请考虑捐赠以支持其维护和进一步开发。

财务支持者

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

_{Philip Viktor Schulz-Klingauf}

协作者

贡献者

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

_{Esteban Gehring}	_{Markus Mächler}	_Tristan	_{Tony H}	_{Michał Stawicki}	_Null
_{Blaze Walker}	_{Cristian Raducanu}	_{Damian Miranda}	_{Dane Vanderbilt}	_{Edgar Scheiermann}	_Erendis
_{Gustavo Miranda}	_{Henno Lauinger}	_空	_{Jean-Francois Cere}	_{Joe DeCock}	_{Jomal Johny}
_{Jonathan Kolberg}	_{Melroy Van Den Berg}	_{Muhammad Ahsan Ayaz}	_{Ovidijus Stukas}	_{Quirin Stiegler}	_{Ray Suelzer}
_{Robert Pattis}	_{Roland Broekema}	_{Sebastian Wierzbicki}	_空	_{Stas Amasev}	_{Thierry Nischelwitzer}
_{Vlad Ioffe}	_无	_无	_Joshua	_无	_无

## 如何使用？

在您的项目中安装 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();


#### 自定义清除图标
为了自定义搜索图标，将 `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 {}