Highlight search results on just one page

Support Extras
1

Hey, I want my search results to be marked on the page to be found and the view to automatically jump to the line.

I use SimpleSearch and SerchHighlight.
The search works, but unfortunately it is not marked. How exactly do I have to adjust that the results are marked? :slight_smile:

2

Do you have corresponding CSS in place that will style the highlighted text within the results?

3

Yes I have. Sorry I explained it wrong :smiley: . The marking works, but unfortunately only in the list of search results. but not with the content on the page

4

As far as I can tell, the extra SearchHighlight needs a searched request parameter to work.

So you probably have to change the template of the SimpleSearch results to add the search value as a parameter. (The placeholder [[+query]] may work.)

This may work as well:

[[!SimpleSearch?
    ...
    &addSearchToLink=`1`
    &searchInLinkName=`searched`
]]
1 Like
5

@Rykoutech You have to add the searched property to the link. The SimpleSearch snippet properties of @halftrainedharry seems to be right. Feel free to add a tested solutions to the SearchHighlight docs on GitHub.

1 Like
6

I thank you!
Now the search results are marked.

But now I have the problem that the search results are still displayed on another subpage, and then i have to click on the term. Only then is the result displayed.
How can I set it up so that the word is marked directly when I enter the search?

7

I honestly don’t understand what you are trying to do.

  • Do you want to search only the current page?
  • Do you want to highlight the search term in the extracts of the search results?
  • Do you want a pure javascript solution that highlights a search term without reloading the page?
8

Exactly I only want to search on one page, preferably only get the search results from this page.

When I type a word in the search engine, I want my term to be highlighted on the page immediately after I click “Search”.

9

I don’t think you need the SimpleSearch extra for this.

Just create a search form with a search field named searched that reloads the current page.

Or maybe use something like mark.js for a solution in javascript.

10

There is a small example with live search by mark.js on: mark.js example with pure JavaScript - JSFiddle - Code Playground

A jQuery example is available too: mark.js example with jQuery - JSFiddle - Code Playground

11

Yes, I tried that at first. Now I have a FAQ drop down menu and I want it to pop up automatically when I search for it

12

Sorry my glass orb is damaged and I don’t see the FAQ drop down menu. So I can’t see how to create the automatic popup when you search for it :grimacing:

In short, what the hell are you trying to accomplish?

13

I’m just as confused as anyone here :wink: But won’t your browser highlight search results on the current page if you hit Ctrl-f?