Highlight search results

[miwurster]

See an example:

[luko0610]

Hello, if this is still available I'd like to take it.

[koppor]

Sure, go ahead!

[luko0610]

I'm having an issue setting up the project. I cannot login, altough I created the sqlite file under the user.home directory.

[luko0610]

Okay, I got it to work.

[koppor]

No login issue is described at #24. Maybe, you can support there, too.

[luko0610]

I'll look into it once I'm back home.

[luko0610]

@koppor
Hello,
So I ran into a small issue and need some advice.
My approach is to insert a html tag directly into the references array, which works perfect if you only search once. The problem is because I am directly altering the data, the added from the previous search will still be there. So I need to find a way to create a backup of the references array before altering it, which I can then use to restore the references before the next search.

I've tried several approaches to make a deep copy of the references, but it always copies by reference.

1st search (works perfectly)

2nd search (still having the markup from the 1st search)

[koppor]

I think, the reference should have an attribute "searchResultHit" (boolean). If true, the CSS class "highlighted" is applied. This CSS class implements some sort of highlighting. - At the beginning of a search. searchResultHit is cleared.

[luko0610]

Yes, but because we do not want to highlight the whole text we need to actually insert a html tag around the part of the text we want to highlight and assign the css class to that tag.

[koppor]

Oh, I see.

Did you check https://angular.de/artikel/mark-highlight-search-results/ and https://stackoverflow.com/a/52569482/873282 and https://stackoverflow.com/a/46106843/873282. These came out here when I googled angular highlight search result. Did they work? If not, please start creating an ADR in docs/adr.

[luko0610]

Thanks for your response. First link looks promising. Haven't been thinking about that approch. I'll try it out tomorrow.

[tobiasdiez]

There is also markjs if you want to highlight on the client side

[luko0610]

Okay, I finished it and made a pull request. Solving this using a custom pipe was way easier than I thought.