Is there a way to highlight specific alphabets in the searched list instead of highlighting the entire word? Currently, when filtering the memberOffice and memberFacilities lists based on the alphabet entered in the search field, the entire text is highlighted. However, I would like only the particular alphabet(s) used for the search to be highlighted in the filtered content. Whether it's one alphabet or more, they should be visibly highlighted. Essentially, I want to pinpoint and emphasize the individual alphabets in the filtered list that match my search query.
If you have any insights or suggestions, please share them. Your help is greatly appreciated.
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);
}
}
}
In the HTML section, I've utilized the following code snippet:
[class.searcHighlight]
Currently, this set of codes highlights the entire words. I'm looking to make some adjustments but struggling to figure out how to solve this issue.
HTML code snippet related to fList:
<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: