如何为ngx-bootstrap typeahead实现上下滚动及箭头键控制功能？

我之前也碰到过一模一样的问题，刚好在ngx-bootstrap里折腾出了解决方案，分享给你：

ngx-bootstrap的Typeahead下拉菜单默认是自适应高度的，选项多了会撑得很长。要添加上下滚动很简单，只需要自定义CSS样式限制下拉容器的高度就行：

/* 可以放在组件的styles里，记得如果用了默认的ViewEncapsulation，需要加::ng-deep穿透 */
::ng-deep .bs-typeahead-dropdown.dropdown-menu {
  max-height: 220px; /* 按需调整高度，比如200-300px都可以 */
  overflow-y: auto;
  /* 可选：去掉默认的padding，让滚动更紧凑 */
  padding: 0;
}

如果你的组件用了ViewEncapsulation.None，直接去掉::ng-deep就行。这样下拉菜单超过设定高度就会自动出现垂直滚动条了。

你提到的ui-bootstrap的那个功能，应该是指用上下箭头切换选中项时，选中项会自动滚动到可视区域对吧？ngx-bootstrap默认没处理这个，所以需要我们手动监听键盘事件来实现：

第一步：模板里设置Typeahead并绑定事件 #

<input
  type="text"
  class="form-control"
  [(ngModel)]="selectedValue"
  [typeahead]="optionsList"
  #typeaheadRef="bsTypeahead"
  (keydown)="onTypeaheadKeyDown($event, typeaheadRef)"
>

第二步：组件类里处理键盘事件和滚动逻辑 #

import { Component, ViewChild } from '@angular/core';
import { TypeaheadComponent } from 'ngx-bootstrap/typeahead';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  selectedValue: string;
  // 模拟足够多的选项来触发滚动
  optionsList = Array.from({ length: 25 }, (_, i) => `选项 ${i + 1}`);

  @ViewChild('typeaheadRef') typeaheadComp: TypeaheadComponent;

  onTypeaheadKeyDown(event: KeyboardEvent, typeahead: TypeaheadComponent) {
    // 只处理上下箭头键
    if (!['ArrowUp', 'ArrowDown'].includes(event.key)) return;

    // 延迟0秒，让Typeahead先更新选中项的DOM（给浏览器一点渲染时间）
    setTimeout(() => {
      const dropdownEl = typeahead.dropdownMenu?.nativeElement as HTMLElement;
      const activeItem = dropdownEl?.querySelector('.active');

      if (activeItem) {
        // 平滑滚动到选中项，block: 'nearest'会让项尽量靠近可视区域顶部/底部
        activeItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        // 如果不需要平滑滚动，用下面的方式直接定位：
        // dropdownEl.scrollTop = activeItem.offsetTop - dropdownEl.offsetTop;
      }
    }, 0);
  }
}

关键说明： #

• 用setTimeout是因为按下箭头键后，ngx-bootstrap需要一点时间去更新选中项的.active类，直接操作DOM会找不到最新的选中元素。
• scrollIntoView的behavior: 'smooth'可以让滚动更流畅，如果你不需要平滑效果，换成behavior: 'auto'或者直接设置scrollTop就行。
• 如果你需要在选中项变化时也处理滚动（比如用鼠标点击后），可以再绑定typeaheadOnSelect事件，把滚动逻辑抽成一个单独的方法复用。

这样就能实现和ui-bootstrap类似的箭头键导航滚动功能了，亲测有效～

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