From 9b8a7aa8ea128f7e197ff38ca9f86ffa53bbe110 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Tue, 4 Feb 2020 16:44:53 +0100 Subject: Improve search typeahead performance and use native events --- client/src/app/shared/angular/highlight.pipe.ts | 74 +++++++++++++------------ 1 file changed, 38 insertions(+), 36 deletions(-) (limited to 'client/src/app/shared/angular') diff --git a/client/src/app/shared/angular/highlight.pipe.ts b/client/src/app/shared/angular/highlight.pipe.ts index 4199d833e..e219b3823 100644 --- a/client/src/app/shared/angular/highlight.pipe.ts +++ b/client/src/app/shared/angular/highlight.pipe.ts @@ -5,48 +5,50 @@ import { SafeHtml } from '@angular/platform-browser' @Pipe({ name: 'highlight' }) export class HighlightPipe implements PipeTransform { /* use this for single match search */ - static SINGLE_MATCH: string = "Single-Match" + static SINGLE_MATCH = 'Single-Match' /* use this for single match search with a restriction that target should start with search string */ - static SINGLE_AND_STARTS_WITH_MATCH: string = "Single-And-StartsWith-Match" + static SINGLE_AND_STARTS_WITH_MATCH = 'Single-And-StartsWith-Match' /* use this for global search */ - static MULTI_MATCH: string = "Multi-Match" + static MULTI_MATCH = 'Multi-Match' - constructor() {} - transform( + // tslint:disable-next-line:no-empty + constructor () {} + + transform ( contentString: string = null, stringToHighlight: string = null, - option: string = "Single-And-StartsWith-Match", - caseSensitive: boolean = false, - highlightStyleName: string = "search-highlight" + option = 'Single-And-StartsWith-Match', + caseSensitive = false, + highlightStyleName = 'search-highlight' ): SafeHtml { - if (stringToHighlight && contentString && option) { - let regex: any = "" - let caseFlag: string = !caseSensitive ? "i" : "" - switch (option) { - case "Single-Match": { - regex = new RegExp(stringToHighlight, caseFlag) - break - } - case "Single-And-StartsWith-Match": { - regex = new RegExp("^" + stringToHighlight, caseFlag) - break - } - case "Multi-Match": { - regex = new RegExp(stringToHighlight, "g" + caseFlag) - break - } - default: { - // default will be a global case-insensitive match - regex = new RegExp(stringToHighlight, "gi") - } - } - const replaced = contentString.replace( - regex, - (match) => `${match}` - ) - return replaced - } else { - return contentString + if (stringToHighlight && contentString && option) { + let regex: any = '' + const caseFlag: string = !caseSensitive ? 'i' : '' + switch (option) { + case 'Single-Match': { + regex = new RegExp(stringToHighlight, caseFlag) + break + } + case 'Single-And-StartsWith-Match': { + regex = new RegExp("^" + stringToHighlight, caseFlag) + break + } + case 'Multi-Match': { + regex = new RegExp(stringToHighlight, 'g' + caseFlag) + break + } + default: { + // default will be a global case-insensitive match + regex = new RegExp(stringToHighlight, 'gi') + } } + const replaced = contentString.replace( + regex, + (match) => `${match}` + ) + return replaced + } else { + return contentString + } } } -- cgit v1.2.3