Angular 8中如何禁用输入下拉框自动填充并显示全部datalist选项

问题原因 #

原生 <datalist> 的匹配过滤逻辑是浏览器内核内置实现的，W3C 标准没有提供关闭或修改该逻辑的官方配置项，默认仅会展示与输入内容连续匹配的选项，你输入的「anuj re」属于非连续字符匹配，不符合浏览器默认规则，因此对应选项会被过滤。

可行解决方案 #

方案1：使用 Angular Material Autocomplete 组件（推荐）

该组件完全支持自定义过滤规则，可直接关闭过滤逻辑，无论输入什么内容都展示全量员工列表，也可自定义模糊匹配规则适配你的输入场景：

1. 安装对应 Angular 8 版本的 Angular Material 依赖
2. 模板代码示例：

<mat-form-field appearance="fill">
  <mat-label>Employee</mat-label>
  <input 
    type="text" 
    matInput 
    formControlName="incurredBy" 
    [matAutocomplete]="auto"
    (change)="GetSelectedEmployeeDetails($event)"
  >
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option 
      *ngFor="let employee of employeesList" 
      [value]="employee.name"
    >
      {{employee.name}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>
<button type="button" class="btn" (click)="FindEmployee()">Find</button>

如果需要支持多关键词空格分隔匹配需求，可以在 TS 中添加自定义过滤逻辑：

// 表单初始化后监听输入框值变化
this.employeeForm.get('incurredBy').valueChanges.subscribe(inputVal => {
  // 不需要过滤直接展示全量的话，直接赋值为 employeesList 即可
  // this.filteredEmployees = this.employeesList;
  
  // 自定义多关键词模糊匹配
  const filterVal = inputVal?.toLowerCase().trim() || '';
  const keywords = filterVal.split(' ').filter(k => k.length);
  this.filteredEmployees = this.employeesList.filter(emp => {
    const empName = emp.name.toLowerCase();
    return keywords.every(key => empName.includes(key));
  });
});

方案2：原生自定义下拉（无需引入第三方依赖）

如果不想引入组件库，可以自己实现简单的下拉层，完全绕过原生 <datalist> 的过滤逻辑，所有选项展示完全由你自己控制：
模板代码示例：

<div class="row" style="display:inline-flex;margin-left:11% !important;position:relative;">
  <label>Employee</label>
  <input 
    id="txtIncurredBy" 
    type="search" 
    formControlName="incurredBy"
    (focus)="showEmpList = true"
    (blur)="setTimeout(() => showEmpList = false, 200)"
    (change)="GetSelectedEmployeeDetails($event)"
  />
  <!-- 自定义下拉列表 -->
  <ul 
    *ngIf="showEmpList" 
    style="position:absolute;top:100%;left:0;right:0;list-style:none;padding:0;margin:0;border:1px solid #eee;max-height:240px;overflow-y:auto;background:#fff;z-index:999;"
  >
    <li 
      *ngFor="let employee of employeesList" 
      (click)="selectEmployee(employee)"
      style="padding:6px 12px;cursor:pointer;"
      [ngStyle]="{'background': employee.name === employeeForm.get('incurredBy').value ? '#f5f5f5' : 'transparent'}"
    >
      {{employee.name}}
    </li>
  </ul>
  <button type="button" class="btn" (click)="FindEmployee()">Find</button>
</div>

TS 代码补充对应逻辑：

showEmpList = false;
// 替换为你实际的表单变量名
employeeForm: FormGroup;

selectEmployee(emp: any) {
  this.employeeForm.get('incurredBy').setValue(emp.name);
  this.showEmpList = false;
  this.GetSelectedEmployeeDetails(emp);
}

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