Highlight entire block when highlighting search results

Hey, I want a whole block to be marked after a search query if a word in it was marked (found).
The SimpleSeach plugin and SearchHighlight are used.

What exactly do you mean by “a whole block”?


Which one of these two extras does the actual highlighting, that you want to be changed?

Hey @halftrainedharry
I mean the div, the class, where the word I’m looking for is located.
Searchhighlight is highlighting the searchresults

I’m not that familiar with SearchHighlight, but glancing at the code, I suspect you would have to change the code to highlight the whole enclosing <div>.

This code doesn’t look familiar to me :slight_smile:
It may be that the markings are made by simple search (?) :smiley:

Hey, I just checked again. The highlight function is performed by SimpleSearch.

You still have to change the code here

if you want more text highlighted than the search term.

Also, the generated extract may not include the whole <div> block.

Hey Harry, thanks for your help. Unfortunately, I have little idea there.
Is there a way to add an alert, like an exclamation point, to be pinned to this block when the searched word is found in this block?

Maybe you can use javascript for that. For example using the :has() selector in jQuery to add a class to the parent div if it contains a search result span (<span class="simplesearch-highlight">...</span>). Then add that exclamation point with CSS.

hey thanks again I got it now with Java Script :slight_smile:

I currently have the problem that after clicking on “Search”, I get a list of the words found, and then have to select the page there, and then the word is highlighted for me.
But I would like to see it displayed without clicking on a link.
The search box is also only visible on the page, which is what it is about.
So that immediately after clicking on “Search” the word and the block are highlighted.
Or should I rather create a new topic?

SimpleSearch searches your entire site and then displays a list of pages where the search term is found. What exactly do you want to be displayed? The whole content of all the pages where the search term is found? Or do you want to search only the current page?

Maybe don’t use SimpleSearch then, but a pure javascript solution like for example mark.js.

Don’t you already have a different topic on that?

Yes, I just want the list of found pages not to appear.
The problem is that the search function is only used for one type of subpage at a time. For example only for FAQs. However, there is not only one FAQ subpage, but at least three, for different product types.
Therefore, I would like to not have to click on a page after clicking on “Search”.
I hope I was able to explain it clearly :slight_smile:

I think SimpleSearch is probably the wrong tool for you.

When you do a search, do you want to see the results from all the 3 FAQ subpages or only from the current one?
How is this FAQ structured? Is each question a MODX resource or do you use MIGX for the questions?

I want the search result to be shown (highlighted) only from the current page.
The questions and answers are normal content in this sense. I made it so that the questions and answers can be inserted with ContentBlocks.

In this case, if all the data that has to be searched is already loaded and displayed on the webpage, I would use a javascript-only solution.

As your FAQ has a clearly defined html-markup, just write a simple script (maybe with jQuery) that filters out all the questions, where the search term is not found.