Angular：搜索关键字，高亮显示关键字

今天不想吃饼干

已于 2022-06-10 15:30:04 修改

阅读量544

点赞数

文章标签： angular.js javascript 前端

于 2022-06-07 14:29:44 首次发布

本文链接：https://blog.csdn.net/weixin_44227791/article/details/125164480

版权

需求

在输入框输入关键字，不区分大小写搜索信息，若有跟关键字相匹配的结果则高亮显示。
删除输入框的内容，高亮文字恢复原样
搜索新内容，前一个搜索内容的高亮文字恢复原样

实现结果

在输入框输入“月”
在这里插入图片描述

实现过程

<!-- 搜索框 -->
 <div class="input-box">
      <input
        type="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, '');
    });
  }