为Angular ng-bootstrap下拉菜单添加搜索功能

核心思路 #

通过自定义管道过滤下拉选项，在下拉菜单容器内嵌入搜索输入框，结合ng-bootstrap的下拉组件API控制展开状态，模拟AngularJS版本的搜索下拉效果。

实现步骤 #

1. 模板结构（HTML）

将搜索框嵌入dropdown-menu内，用*ngFor遍历过滤后的选项列表：

<div ngbDropdown class="d-inline-block">
  <button class="btn btn-outline-primary" id="dropdownSearch" ngbDropdownToggle>
    {{ selectedOption || '选择选项' }}
  </button>
  <div ngbDropdownMenu aria-labelledby="dropdownSearch">
    <input 
      type="text" 
      class="form-control mb-2" 
      placeholder="搜索..."
      [(ngModel)]="searchTerm"
      (focus)="keepDropdownOpen()"
    >
    <button 
      *ngFor="let option of options | filterOptions: searchTerm" 
      class="dropdown-item"
      (click)="selectOption(option)"
    >
      {{ option }}
    </button>
  </div>
</div>

2. 自定义过滤管道

创建管道实现选项的关键词过滤：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'filterOptions' })
export class FilterOptionsPipe implements PipeTransform {
  transform(options: string[], searchTerm: string): string[] {
    if (!searchTerm) return options;
    return options.filter(option => 
      option.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }
}

需在对应模块中声明该管道。

3. 组件逻辑（TS）

处理选项数据、搜索状态及下拉菜单的展开/关闭控制：

import { Component } from '@angular/core';
import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-searchable-dropdown',
  templateUrl: './searchable-dropdown.component.html',
  styleUrls: ['./searchable-dropdown.component.css']
})
export class SearchableDropdownComponent {
  options = ['选项1', '选项2', '选项3', '测试选项', '搜索示例'];
  searchTerm = '';
  selectedOption: string | null = null;

  constructor(private dropdown: NgbDropdown) {}

  keepDropdownOpen() {
    // 聚焦搜索框时强制保持下拉展开
    this.dropdown.open();
  }

  selectOption(option: string) {
    this.selectedOption = option;
    this.dropdown.close();
    this.searchTerm = '';
  }
}

关键细节说明 #

• 通过(focus)事件避免点击搜索框时下拉菜单自动关闭
• 过滤管道支持大小写不敏感匹配，优化搜索体验
• 选择选项后自动清空搜索词并关闭下拉菜单

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