求适配Angular 11的带搜索功能多选复选框下拉列表实现方法

核心实现思路 #

基于Angular 11原生特性手动实现，不依赖高版本第三方库，覆盖搜索过滤、多选状态管理、下拉面板交互等核心功能。

步骤1：创建组件 #

生成自定义多选下拉组件：

ng generate component multi-select-dropdown

步骤2：组件模板（multi-select-dropdown.component.html） #

<div class="multi-select-container">
  <!-- 触发按钮 -->
  <button 
    class="select-trigger"
    (click)="toggleDropdown()"
  >
    {{ selectedOptions.length > 0 ? selectedOptions.map(opt => opt.label).join(', ') : '请选择' }}
    <span class="arrow">{{ isOpen ? '▲' : '▼' }}</span>
  </button>

  <!-- 下拉面板 -->
  <div *ngIf="isOpen" class="dropdown-panel">
    <!-- 搜索框 -->
    <input 
      type="text" 
      class="search-input"
      [(ngModel)]="searchTerm"
      placeholder="搜索选项..."
      (input)="filterOptions()"
    >

    <!-- 选项列表 -->
    <ul class="options-list">
      <li *ngFor="let option of filteredOptions" class="option-item">
        <input 
          type="checkbox" 
          [(ngModel)]="option.checked"
          (change)="onOptionChange(option)"
        >
        <span>{{ option.label }}</span>
      </li>
    </ul>
  </div>
</div>

步骤3：组件逻辑（multi-select-dropdown.component.ts） #

import { Component, Input, Output, EventEmitter } from '@angular/core';

interface SelectOption {
  value: any;
  label: string;
  checked?: boolean;
}

@Component({
  selector: 'app-multi-select-dropdown',
  templateUrl: './multi-select-dropdown.component.html',
  styleUrls: ['./multi-select-dropdown.component.css']
})
export class MultiSelectDropdownComponent {
  @Input() options: SelectOption[] = [];
  @Output() selectionChange = new EventEmitter<SelectOption[]>();

  isOpen = false;
  searchTerm = '';
  filteredOptions: SelectOption[] = [];
  selectedOptions: SelectOption[] = [];

  ngOnInit() {
    // 初始化选项选中状态
    this.options.forEach(opt => opt.checked = false);
    this.filteredOptions = [...this.options];
  }

  toggleDropdown() {
    this.isOpen = !this.isOpen;
  }

  filterOptions() {
    if (!this.searchTerm.trim()) {
      this.filteredOptions = [...this.options];
      return;
    }
    this.filteredOptions = this.options.filter(opt => 
      opt.label.toLowerCase().includes(this.searchTerm.toLowerCase())
    );
  }

  onOptionChange(option: SelectOption) {
    if (option.checked) {
      this.selectedOptions.push(option);
    } else {
      this.selectedOptions = this.selectedOptions.filter(opt => opt.value !== option.value);
    }
    this.selectionChange.emit([...this.selectedOptions]);
  }
}

步骤4：样式（multi-select-dropdown.component.css） #

.multi-select-container {
  position: relative;
  width: 250px;
}

.select-trigger {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.arrow {
  margin-left: 8px;
}

.dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1000;
}

.search-input {
  width: calc(100% - 24px);
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid #eee;
  outline: none;
}

.options-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
}

.option-item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.option-item:hover {
  background-color: #f5f5f5;
}

.option-item input {
  margin-right: 8px;
}

步骤5：父组件中使用 #

<!-- 父组件模板 -->
<app-multi-select-dropdown
  [options]="selectOptions"
  (selectionChange)="onSelectionChange($event)"
></app-multi-select-dropdown>

// 父组件逻辑
selectOptions = [
  { value: '1', label: '选项1' },
  { value: '2', label: '选项2' },
  { value: '3', label: '选项3' },
  { value: '4', label: '选项4' },
  { value: '5', label: '选项5' }
];

onSelectionChange(selected: any[]) {
  console.log('选中的选项：', selected);
}

补充说明 #

• 完全基于Angular 11核心特性开发，无第三方依赖，兼容性稳定
• 支持搜索过滤、多选、选中状态回显、下拉面板展开/收起
• 可根据需求自定义样式，比如调整宽度、颜色、hover效果等

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