需求
在输入框输入关键字，不区分大小写搜索信息，若有跟关键字相匹配的结果则高亮显示。删除输入框的内容，高亮文字恢复原样搜索新内容，前一个搜索内容的高亮文字恢复原样实现结果
在输入框输入“月”
实现过程
<!-- 搜索框 --><div class="input-box"><inputtype="text"placeholder="{{ 'Search by keywords' | translate }}"[(ngModel)]="searchText"(keypress)="$event.which === 13 ? searchData() : 0"/>/><em (click)="clearData()" *ngIf="searchText !== null"></em></div>
<!-- 表格 --><nz-table #basicTable [nzShowPagination]="false" [nzData]="[{}]"><thead><tr><th nzWidth="200px">{{ 'classify ' | translate }}</th><th>{{ 'desc ' | translate }}</th></tr></thead><tbody><tr *ngFor="let data of classification"><td *ngIf="data.classify !== null">{{ data.classify }}</td><!-- 标记要查询关键字的栏位 --><td #keyWords *ngIf="data.classify !== null">{{ data.desc }}</td></tr></tbody></nz-table>
import {ElementRef, QueryList, Renderer2, ViewChild, ViewChildren } from '@angular/core';@ViewChildren('keyWords') keyWords: QueryList<ElementRef>;// 搜索輸入框的內容searchData() {this.keyWords.forEach((el) => {el.nativeElement.innerHTML = el.nativeElement.innerHTML.replace(/(<\/?span.*?>)/g, '');let content = el.nativeElement;let tempHTML = el.nativeElement.innerHTML;const values = tempHTML.split(this.searchText.toUpperCase());content.innerHTML = values.join(`<span style="color:#55C3F6; #test">${this.searchText.toUpperCase()}</span>`);});}// 清除输入框的内容clearData() {this.searchText = null;this.keyWords.forEach((el) => {el.nativeElement.innerHTML = el.nativeElement.innerHTML.replace(/(<\/?span.*?>)/g, '');});}
