Angular mat-autocomplete条件显示与多字段匹配实现咨询

一、修复Autocomplete选项框位置异常 #

你的代码存在三处关键问题导致选项框显示异常：

1. 模板引用变量不匹配：输入框的[matAutocomplete]="auto"指向的变量是auto，但mat-autocomplete的模板变量是#emp="matAutocomplete"，两者需保持一致。
2. 标签闭合错误：mat-autocomplete的闭合标签写成了<mat-autocomplete>，应改为</mat-autocomplete>。
3. 多余样式类：mat-autocomplete无需添加form-control类，该类会干扰下拉面板的默认定位。

修正后的HTML代码片段：

<div class="form-floating form-group">
  <input type="text" class="form-control" id="fltName" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
  <label for="fltName">Name</label>

  <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
      {{option}}
    </mat-option>
  </mat-autocomplete>
</div>

二、技术问询解答 #

1. 仅当匹配结果≤2个时显示选项框 #

在组件的过滤逻辑中，对筛选后的结果长度进行判断，仅当长度≤2时返回结果，否则返回空数组：

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

@Component({
  // 组件元数据
})
export class YourComponent {
  myControl = new FormControl('');
  options: string[] = ['Option1', 'Option2', 'Option3', 'Option4'];
  filteredOptions: Observable<string[]>;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value)),
      // 仅保留长度≤2的结果
      map(filteredList => filteredList.length <= 2 ? filteredList : [])
    );
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(option => option.toLowerCase().includes(filterValue));
  }
}

2. 支持多字段匹配的对象类型选项 #

组件端配置

定义对象类型的选项数组，修改过滤逻辑以匹配对象的任意字段，并添加displayWith函数控制输入框显示内容：

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

interface Employee {
  name: string;
  emp_id: number;
  emp_no: number;
}

@Component({
  // 组件元数据
})
export class YourComponent {
  myControl = new FormControl<Employee | string>('');
  options: Employee[] = [
    {name: '张三', emp_id: 123, emp_no: 333},
    {name: '李四', emp_id: 456, emp_no: 444},
    {name: '王五', emp_id: 789, emp_no: 555}
  ];
  filteredOptions: Observable<Employee[]>;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value))
    );
  }

  // 控制输入框显示选中对象的name字段
  displayFn(employee: Employee): string {
    return employee ? employee.name : '';
  }

  private _filter(value: string | Employee): Employee[] {
    const filterValue = typeof value === 'string' ? value.toLowerCase() : value.name.toLowerCase();
    return this.options.filter(employee => 
      employee.name.toLowerCase().includes(filterValue) ||
      employee.emp_id.toString().includes(filterValue) ||
      employee.emp_no.toString().includes(filterValue)
    );
  }
}

模板端配置

更新HTML模板，绑定displayWith函数，并在选项中显示员工姓名：

<div class="form-floating form-group">
  <input type="text" class="form-control" id="fltName" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto" [displayWith]="displayFn">
  <label for="fltName">Name</label>

  <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
    <mat-option *ngFor="let emp of filteredOptions | async" [value]="emp">
      {{emp.name}}
    </mat-option>
  </mat-autocomplete>
</div>

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