Angular可搜索下拉框实现求助：添加搜索过滤功能遇阻

核心问题点 #

1. 过滤逻辑未生效：filter函数里用map遍历但未将结果赋值给validatorvalue，且判断字段错误——你在HTML中展示的是first_name和last_name，但代码里用了不存在的e.value做匹配。
2. 丢失原始数据：直接修改validatorvalue会导致搜索清空后无法恢复全部选项，需要保留原始数据副本。
3. 事件响应不够严谨：keyup事件不如input事件实时，且未处理空输入的情况。

修复步骤 #

1. 新增原始数据备份变量 #

在组件类里添加变量保存完整的原始选项数据：

originalValidatorValues: any[] = [];

2. 修改setValue函数初始化数据 #

setValue(values) {
  this.originalValidatorValues = [];
  for (const value of values) {
    if (value.name.length > 0) {
      for (const valuename of value.name) {
        const index = this.originalValidatorValues.map(e => e.id).indexOf(valuename.id);
        if (index === -1) {
          this.originalValidatorValues.push(valuename);
        }
      }
    }
  }
  // 初始化时显示全部选项
  this.validatorvalue = [...this.originalValidatorValues];
}

3. 修复filter函数逻辑 #

filter(value: string) {
  const filterText = value.toLowerCase().trim();
  if (!filterText) {
    // 输入为空时恢复全部选项
    this.validatorvalue = [...this.originalValidatorValues];
    return;
  }
  // 根据姓名全称做模糊匹配
  this.validatorvalue = this.originalValidatorValues.filter(item => {
    const fullName = `${item.first_name} ${item.last_name}`.toLowerCase();
    return fullName.includes(filterText);
  });
}

4. 优化HTML事件绑定 #

把keyup换成input事件，响应更及时：

<input (input)="onkey($event)" type="text" matInput placeholder="搜索姓名">
            
<mat-option *ngFor="let value of validatorvalue" [value]="value.id">
  {{ value.first_name + ' ' + value.last_name }}
</mat-option>

额外优化建议 #

• 可以给过滤逻辑加防抖（比如用RxJS的debounceTime），避免输入时频繁触发过滤，减少性能消耗。
• 提前校验valuename对象的first_name和last_name字段是否存在，防止出现undefined拼接的异常。

内容的提问来源于stack exchange，提问作者user16795407