在ngbDropDown中实现按键跳转选项功能

当然可以实现这个功能！NgbDropdown本身并没有内置类似原生<select>的按键匹配跳转，但我们可以通过自定义事件监听或者封装可复用指令的方式轻松搞定，下面给你两种可行的方案：

方案一：组件内直接实现（快速上手） #

这种方式适合单个组件使用、不需要复用的场景。

模板代码 #

<div ngbDropdown #myDropdown="ngbDropdown" (keydown)="handleDropdownKeydown($event, myDropdown)">
  <button class="btn btn-secondary" ngbDropdownToggle>下拉菜单</button>
  <div ngbDropdownMenu>
    <button ngbDropdownItem #dropdownItem>Action</button>
    <button ngbDropdownItem #dropdownItem>Another action</button>
    <button ngbDropdownItem #dropdownItem>Something else here</button>
    <button ngbDropdownItem #dropdownItem>Apple</button>
    <button ngbDropdownItem #dropdownItem>Banana</button>
    <button ngbDropdownItem #dropdownItem>Cherry</button>
  </div>
</div>

组件类代码 #

import { Component, QueryList, ViewChildren, ElementRef } from '@angular/core';
import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 获取所有下拉选项元素
  @ViewChildren('dropdownItem') dropdownItems!: QueryList<ElementRef>;
  // 存储用户连续输入的字符
  private searchQuery = '';
  // 用于重置搜索的定时器
  private searchResetTimer: any;

  handleDropdownKeydown(event: KeyboardEvent, dropdown: NgbDropdown) {
    // 仅在下拉菜单展开时处理，同时忽略导航类按键
    if (!dropdown.isOpen() || ['ArrowUp', 'ArrowDown', 'Enter', 'Space', 'Escape', 'Tab'].includes(event.key)) {
      return;
    }

    // 只处理单字符的字母/数字键
    if (event.key.length === 1 && /[a-zA-Z0-9]/.test(event.key)) {
      event.preventDefault(); // 避免字符输入到其他元素中

      // 更新搜索字符串，统一转小写匹配
      this.searchQuery += event.key.toLowerCase();

      // 重置定时器：1秒内无新输入则清空搜索串
      if (this.searchResetTimer) {
        clearTimeout(this.searchResetTimer);
      }
      this.searchResetTimer = setTimeout(() => {
        this.searchQuery = '';
      }, 1000);

      // 遍历所有选项，查找第一个匹配的项
      const matchingItem = this.dropdownItems.find(item => 
        item.nativeElement.textContent.trim().toLowerCase().startsWith(this.searchQuery)
      );

      if (matchingItem) {
        // 聚焦到匹配项，同时触发NgbDropdown的激活状态
        matchingItem.nativeElement.focus();
        // 滚动到视图（当选项过多时可选）
        matchingItem.nativeElement.scrollIntoView({ block: 'nearest' });
      }
    }
  }
}

方案二：自定义可复用指令（推荐复用场景） #

如果你的项目中有多个下拉菜单需要这个功能，封装成指令会更高效、更易维护。

自定义指令代码 #

import { Directive, HostListener, QueryList, ViewChildren, ElementRef, OnInit } from '@angular/core';
import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';

@Directive({
  selector: '[ngbDropdownKeyboardSearch]'
})
export class NgbDropdownKeyboardSearchDirective implements OnInit {
  @ViewChildren('dropdownItem') dropdownItems!: QueryList<ElementRef>;
  private searchQuery = '';
  private searchResetTimer: any;

  constructor(private dropdown: NgbDropdown) { }

  ngOnInit(): void {
    // 下拉菜单关闭时自动清空搜索串
    this.dropdown.hidden.subscribe(() => {
      this.searchQuery = '';
      if (this.searchResetTimer) {
        clearTimeout(this.searchResetTimer);
      }
    });
  }

  @HostListener('keydown', ['$event'])
  handleKeydown(event: KeyboardEvent) {
    if (!this.dropdown.isOpen() || ['ArrowUp', 'ArrowDown', 'Enter', 'Space', 'Escape', 'Tab'].includes(event.key)) {
      return;
    }

    if (event.key.length === 1 && /[a-zA-Z0-9]/.test(event.key)) {
      event.preventDefault();

      this.searchQuery += event.key.toLowerCase();

      if (this.searchResetTimer) {
        clearTimeout(this.searchResetTimer);
      }
      this.searchResetTimer = setTimeout(() => {
        this.searchQuery = '';
      }, 1000);

      const matchingItem = this.dropdownItems.find(item => 
        item.nativeElement.textContent.trim().toLowerCase().startsWith(this.searchQuery)
      );

      if (matchingItem) {
        matchingItem.nativeElement.focus();
        matchingItem.nativeElement.scrollIntoView({ block: 'nearest' });
      }
    }
  }
}

使用指令 #

只需要在下拉菜单元素上添加指令，并给每个选项加上#dropdownItem标记即可：

<div ngbDropdown ngbDropdownKeyboardSearch>
  <button class="btn btn-secondary" ngbDropdownToggle>下拉菜单</button>
  <div ngbDropdownMenu>
    <button ngbDropdownItem #dropdownItem>Orange</button>
    <button ngbDropdownItem #dropdownItem>Pear</button>
    <button ngbDropdownItem #dropdownItem>Grape</button>
  </div>
</div>

注意事项 #

• 确保所有ngbDropdownItem都添加了#dropdownItem模板变量，这样才能被指令或组件获取到
• 可以根据需求调整匹配逻辑：比如把startsWith改成includes就能实现包含匹配，而不仅仅是开头匹配
• 搜索串的重置时间（1秒）可以根据用户习惯调整，比如改成2秒
• 动态生成的选项也能正常工作，因为QueryList会自动跟踪元素变化
• 非按钮类型的下拉选项（比如<a>标签）同样适用，代码不需要修改

内容的提问来源于stack exchange，提问作者Oanta William Richard