Angular+Bootstrap实现Typeahead弹窗底部添加按钮求助

1. 自定义弹窗模板，嵌入底部按钮 #

直接通过ng-template接管Typeahead的弹窗结构，把搜索结果选项和底部按钮整合进去：

<input id="typeahead-basic" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" />

<!-- 保留原有的搜索结果高亮模板 -->
<ng-template #rt let-r="result" let-t="term">
  <ngb-highlight [result]="r" [term]="t"></ngb-highlight>
</ng-template>

<!-- 自定义完整弹窗结构 -->
<ng-template ngbTypeaheadPopup let-results="results" let-term="term" let-focusedIndex="focusedIndex">
  <div class="dropdown-menu show" role="listbox">
    <!-- 遍历渲染搜索结果 -->
    <ng-template ngFor let-result [ngForOf]="results" let-i="index">
      <button class="dropdown-item" role="option" [id]="id + '-option-' + i"
              [class.active]="i === focusedIndex" (click)="model = result">
        <ng-container [ngTemplateOutlet]="rt" [ngTemplateOutletContext]="{ result: result, term: term }"></ng-container>
      </button>
    </ng-template>
    <!-- 底部按钮区域，添加分割线区分 -->
    <div class="dropdown-divider"></div>
    <button class="dropdown-item text-center" (click)="handleAddNew()">
      新增当前输入项
    </button>
  </div>
</ng-template>

2. 组件类中实现按钮逻辑 #

在对应的.ts文件里编写底部按钮的点击事件，比如把输入内容新增到选项列表：

import { Component, ViewChild } from '@angular/core';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-typeahead-basic',
  templateUrl: './typeahead-basic.html'
})
export class NgbdTypeaheadBasic {
  model: any;
  @ViewChild(NgbTypeahead) typeahead!: NgbTypeahead;
  
  states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

  search = (text$: Observable<string>) =>
    text$.pipe(
      map(term => term === '' ? []
        : this.states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))
    );

  handleAddNew() {
    if (this.model && !this.states.includes(this.model)) {
      this.states.push(this.model);
      // 新增后关闭弹窗（可选）
      this.typeahead.close();
    }
  }
}

3. 调整样式（按需） #

如果按钮和选项的排版不符合预期，添加自定义CSS优化：

.dropdown-menu {
  padding-bottom: 0;
}
.dropdown-divider {
  margin: 0;
}
.dropdown-item.text-center {
  border-top: 1px solid #eee;
}

关键提示 #

• ngbTypeaheadPopup是实现自定义弹窗的核心，它允许你完全控制弹窗的HTML结构，自由添加额外元素。
• 原搜索结果的按钮必须保留role="option"属性和赋值逻辑，否则Typeahead的选值功能会失效。
• 底部按钮的逻辑可根据需求修改，比如打开新增数据模态框、调用接口提交数据等。

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