如何在ng-bootstrap typeahead中高亮输入文本？

嘿，这个问题我刚好解决过！用ng-bootstrap的typeahead处理对象数组时，默认的结果模板确实不会自动高亮，不过按照官方的Template for results示例扩展一下就行，核心是自定义结果模板并实现高亮逻辑。我给你一步步拆解：

1. 准备对象数组数据源 #

首先你得有一个对象数组，比如每个元素包含name（或你要显示的字段）：

// 组件类中定义数据源
items = [
  { id: 1, name: 'Alabama' },
  { id: 2, name: 'Alaska' },
  { id: 3, name: 'Arizona' },
  { id: 4, name: 'Arkansas' },
  { id: 5, name: 'California' }
];

2. 自定义结果模板 #

在组件模板里，用ng-template创建自定义的结果项模板，通过let-item拿到当前结果对象，let-term拿到用户输入的关键词：

<input
  type="text"
  class="form-control"
  [(ngModel)]="selectedItem"
  [ngbTypeahead]="search"
  [inputFormatter]="(item) => item?.name" <!-- 输入框显示选中项的name -->
  [ngbTypeaheadItemTemplate]="resultTemplate" <!-- 指定自定义模板 -->
  (selectItem)="onSelect($event)"
/>

<!-- 自定义结果模板 -->
<ng-template #resultTemplate let-item="item" let-term="term">
  <span [innerHTML]="highlight(term, item.name)"></span>
</ng-template>

3. 实现高亮逻辑 #

你可以选择在组件里写一个方法，或者创建一个复用的管道来处理高亮：

方法一：组件内方法实现 #

在组件类中添加高亮方法，用正则匹配关键词并替换为带样式的标签：

highlight(term: string, itemName: string): string {
  if (!term) return itemName;
  // 忽略大小写匹配关键词
  const regex = new RegExp(`(${term})`, 'gi');
  // 把匹配到的内容包裹在高亮span里
  return itemName.replace(regex, '<span class="highlight">$1</span>');
}

方法二：复用管道实现（推荐） #

创建一个HighlightPipe，方便在多个组件中复用：

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

@Pipe({ name: 'highlight' })
export class HighlightPipe implements PipeTransform {
  transform(text: string, term: string): string {
    if (!term) return text;
    const regex = new RegExp(`(${term})`, 'gi');
    return text.replace(regex, '<span class="highlight">$1</span>');
  }
}

然后在模板里用管道：

<ng-template #resultTemplate let-item="item" let-term="term">
  <span [innerHTML]="item.name | highlight:term"></span>
</ng-template>

4. 添加高亮样式 #

最后在CSS里给高亮标签加样式：

.highlight {
  background-color: #ffeb3b; /* 黄色背景 */
  font-weight: bold;
}

关键注意点 #

• 必须用[innerHTML]来渲染高亮内容，因为直接绑定文本会把HTML标签转义，看不到高亮效果
• let-term是ng-bootstrap自动传递给模板的，不用额外定义，它就是用户当前输入的关键词
• 如果你的对象字段不是name，记得替换成你实际的字段名

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