如何使用Angular 10在HTML中实现可编辑下拉框功能

下面提供两种常用实现方式，可根据项目技术栈选择：

方案1：原生自研实现（无第三方依赖） #

核心实现逻辑 #

• 结合输入框的编辑能力与下拉列表的选择能力，通过响应式表单监听输入内容实时过滤选项
• 通过状态变量控制下拉列表的显隐，监听页面全局点击事件实现点击外部收起下拉

前置准备 #

在对应功能模块中导入ReactiveFormsModule：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, ReactiveFormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

组件代码 #

逻辑层（.ts）

// editable-select.component.ts
import { Component, HostListener } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-editable-select',
  templateUrl: './editable-select.component.html',
  styleUrls: ['./editable-select.component.css']
})
export class EditableSelectComponent {
  // 原始下拉选项
  optionList: string[] = ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '西安'];
  // 过滤后展示的选项
  filteredOptions: string[] = [...this.optionList];
  // 下拉显隐状态
  showDropdown = false;
  // 输入框绑定的表单控件
  selectControl = new FormControl('');

  constructor() {
    // 监听输入内容变化，过滤匹配的选项
    this.selectControl.valueChanges.subscribe(value => {
      this.filteredOptions = this.optionList.filter(option => 
        option.includes(value || '')
      );
      // 输入时自动展开下拉
      this.showDropdown = true;
    });
  }

  // 选择下拉选项
  selectOption(option: string) {
    this.selectControl.setValue(option);
    this.showDropdown = false;
  }

  // 监听全局点击事件，点击下拉和输入框以外的区域收起下拉
  @HostListener('document:click', ['$event'])
  clickOutside(event: Event) {
    const target = event.target as HTMLElement;
    if (!target.closest('.editable-select-wrapper')) {
      this.showDropdown = false;
    }
  }
}

模板层（.html）

<!-- editable-select.component.html -->
<div class="editable-select-wrapper">
  <input 
    type="text" 
    [formControl]="selectControl"
    (click)="showDropdown = !showDropdown"
    placeholder="请输入或选择城市"
    class="select-input"
  >
  <ul class="dropdown-list" *ngIf="showDropdown && filteredOptions.length">
    <li 
      *ngFor="let option of filteredOptions"
      (click)="selectOption(option)"
      class="dropdown-item"
    >
      {{ option }}
    </li>
  </ul>
  <!-- 无匹配选项时的提示 -->
  <div class="empty-tip" *ngIf="showDropdown && !filteredOptions.length">
    无匹配选项
  </div>
</div>

样式层（.css）

/* editable-select.component.css */
.editable-select-wrapper {
  position: relative;
  width: 300px;
}
.select-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 14px;
}
.dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 6px 0;
  list-style: none;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: #fff;
  max-height: 200px;
  overflow-y: auto;
  z-index: 999;
}
.dropdown-item {
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
}
.dropdown-item:hover {
  background: #f5f7fa;
}
.empty-tip {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 12px;
  text-align: center;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: #fff;
  z-index: 999;
}

方案2：基于Angular Material实现（适合已接入Material的项目） #

如果项目已经接入Angular Material组件库，可以直接使用mat-autocomplete组件快速实现，代码更简洁，自带无障碍适配。

前置准备 #

导入依赖模块：

import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { ReactiveFormsModule } from '@angular/forms';

示例代码 #

<mat-form-field appearance="fill" style="width: 300px">
  <input type="text" placeholder="请输入或选择城市" matInput [formControl]="selectControl" [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let option of filteredOptions" [value]="option">
      {{ option }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

逻辑层的过滤逻辑和原生实现一致，无需额外处理显隐、点击外部收起等交互，组件已内置支持。

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