时间戳

首页 > 解决方案 > 如何使用角度突出显示用于搜索的字母

javascript - 如何使用角度突出显示用于搜索的字母

问题描述

我需要突出显示搜索列表中的字母，而不是突出显示整个单词。在这里，我正在过滤memberOffice列表并memberFacilities基于我在搜索中给出的字母表，因此整个孩子都被突出显示。但现在基于过滤的内容而不是突出显示整行，我需要突出显示我用于搜索的特定字母，如果它也超过 1 个字母，则需要突出显示。所以基本上，我需要根据我在搜索字段中输入的字母突出显示过滤列表中的字母。需要帮忙。

提前致谢。

TS：

searchFacility(search) {
    this.sLetter = search;
    let memberFacilities = true;
    if (search) {
      this.dtFacilities.expandedRows = [];
      setTimeout(() => {
        this.dtFacilities.expandedRows = this.dtFacilities.value;
        this.dtFacilities.value.forEach(m => {
          m.memberFacilities.forEach(f => {
            let mySearch = search.toLowerCase();
            let facilityName = f.facilityName.toLowerCase();
            if (facilityName && facilityName.includes(mySearch)) {
              f.isShowMember = false;
              memberFacilities = false;
            } else {
              f.isShowMember = true;
            }
          })
        })
        if (memberFacilities) {
          this.dtFacilities.expandedRows = [];
        } 
      }, 100);

    }

  }

}

在 HTML 中，我使用了

[class.searcHighlight]

我正在使用这组代码突出显示整个单词。我需要做一些改变，但我不知道如何解决。

fList的HTML：

<p-column field="facilityName" header="Medical Office Name" [sortable]="true">
          <ng-template let-col let-fList="rowData" pTemplate="body">
            <span>
              <a (click)="selectedFacility(fList.facilityID)" [innerHtml]="fList.facilityName | getHtml : sLetter">
                <strong>{{fList.facilityName}}</strong>
              </a>
              (
              <span>{{fList.facilityType}}</span>)
            </span>
          </ng-template>
        </p-column>
DEMO:

演示

标签： javascripthtmlcssangular

解决方案

将以下内容添加到您的代码中

app.component.ts

     import { Pipe, PipeTransform } from '@angular/core';
        import { DomSanitizer } from '@angular/platform-browser'


    @Pipe({ name: 'getHtml' })
export class HighlihtText implements PipeTransform {
  constructor(private sanitized: DomSanitizer) { }
  transform(value, searchText) {
    if(searchText=='' || !searchText){
      return value;
    }
    console.log("value="+value)
    var str = value.toLowerCase();
    searchText=searchText.toLowerCase();
    var currHtml = "";
    var ind = -1;
    while (str.indexOf(searchText) >= 0) {
      ind = str.indexOf(searchText);
      createHtml(value.substr(0, ind),value.substr(ind,searchText.length))
      str = str.substr(ind + searchText.length)
      value=value.substr(ind + searchText.length);
    }
    if (str.length > 0) {
      currHtml = currHtml + str;
    }
    function createHtml(nohighlighText,match) {
      console.log(nohighlighText)
      currHtml = currHtml + nohighlighText + "<span class=\"searcHighLight\" >" + match + "</span>"
    }
    return this.sanitized.bypassSecurityTrustHtml(currHtml);
  }

}

在app.component.html中，将突出显示搜索结果的部分更改为

<a class="userlist" (click)="selectedFacility(memberFacility.facilityID)" [innerHtml]="memberFacility.facilityName | getHtml : sLetter">
                      </a>

在app.module.ts 中声明新创建的管道管道 

import { AppComponent ,HighlihtText} from './app.component';

 declarations: [ AppComponent, HelloComponent,facilityFilterPipe,HighlihtText ],

对于重置更改app.component.tsALL的搜索问题， 在方法searchFacility(..) 的末尾添加以下行

if(search==''){
      this.searchFname="";
    }

并初始化变量searchFname如下

 searchFname:String;

对于 HighligtingfList元素，更改 

<a (click)="selectedFacility(fList.facilityID)" [innerHtml]="fList.facilityName | getHtml : sLetter">

至 

<a (click)="selectedFacility(fList.facilityID)">
                <strong  *ngIf="sLetter!=''" [innerHtml]="fList.facilityName | getHtml : sLetter"></strong>
                <strong *ngIf="sLetter==''">{{fList.facilityName}}</strong>
              </a>

并sLetter在app.component.ts ngOnInit()中初始化为

this.sLetter="";

StackBlitz 网址：https ://stackblitz.com/edit/angular-ku9aaj

如果您有任何疑虑，请告诉我

推荐阅读