实现mat-autocomplete的部分字符串匹配过滤及高亮功能

我帮你搞定这个需求——让mat-autocomplete支持任意位置的关键词匹配，同时高亮显示匹配的部分。下面是完整的可落地实现方案：

1. HTML模板改造 #

先补全并调整你的模板代码，重点是用innerHTML渲染高亮内容，同时关联过滤逻辑：

<mat-form-field class="form-group special-input">
  <input type="text" 
         placeholder="Select a trade" 
         aria-label="Select a trade" 
         matInput 
         [formControl]="tradeControl" 
         [matAutocomplete]="auto">

  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let trade of filteredTrades | async" [value]="trade">
      <!-- 用innerHTML渲染带高亮的内容 -->
      <span [innerHTML]="getHighlightedText(trade.name)"></span>
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

2. TypeScript核心逻辑实现 #

这里包含了任意位置过滤、关键词高亮的核心代码，注释已经标清楚关键点：

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

// 定义交易数据结构，根据你的实际需求调整
interface Trade {
  id: number;
  name: string;
}

@Component({
  selector: 'app-trade-autocomplete',
  templateUrl: './trade-autocomplete.component.html',
  styleUrls: ['./trade-autocomplete.component.css']
})
export class TradeAutocompleteComponent {
  tradeControl = new FormControl('');
  // 模拟你的交易数据源，换成你实际的接口数据即可
  trades: Trade[] = [
    { id: 1, name: 'Stock Equity Trade' },
    { id: 2, name: 'Forex Currency Exchange' },
    { id: 3, name: 'Commodity Futures Transaction' },
    { id: 4, name: 'Government Bond Trade' }
  ];
  filteredTrades: Observable<Trade[]>;

  ngOnInit() {
    // 监听输入框变化，实时过滤交易列表
    this.filteredTrades = this.tradeControl.valueChanges.pipe(
      startWith(''),
      map(inputValue => this.filterTrades(inputValue || ''))
    );
  }

  // 核心：实现任意位置的模糊匹配
  private filterTrades(inputValue: string): Trade[] {
    const lowerCaseInput = inputValue.toLowerCase();
    return this.trades.filter(trade => 
      trade.name.toLowerCase().includes(lowerCaseInput)
    );
  }

  // 核心：高亮匹配的关键词部分
  getHighlightedText(tradeName: string): string {
    const inputValue = this.tradeControl.value.toLowerCase();
    if (!inputValue) return tradeName;

    // 用正则全局匹配关键词，忽略大小写
    const regex = new RegExp(`(${inputValue})`, 'gi');
    // 用<mark>标签包裹匹配部分，后续通过CSS美化样式
    return tradeName.replace(regex, '<mark>$1</mark>');
  }
}

3. CSS美化高亮样式 #

给高亮的<mark>标签加个显眼的样式，让用户一眼看到匹配部分：

mark {
  background-color: #fff3cd;
  font-weight: 600;
  padding: 0 2px;
  border-radius: 2px;
}

关键细节说明 #

• 匹配逻辑：用includes()替代默认的startsWith()，实现任意位置的字符串匹配，不管关键词在开头、中间还是结尾都能命中
• 高亮实现：通过正则表达式全局匹配输入内容，用<mark>标签包裹后，通过innerHTML渲染到页面上（注意确保输入内容安全，避免XSS风险）
• 实时过滤：借助RxJS的valueChanges监听输入框变化，配合async管道自动更新下拉列表

这样改完之后，当你输入比如“trans”，会匹配到“Commodity Futures Transaction”，而且“trans”部分会被高亮显示；输入“trade”则会匹配到“Stock Equity Trade”和“Government Bond Trade”，完美满足你的需求～

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