Ask community: Autoscroll and text highlight

[tenmozes]

I want to ask the community about how to make search more human friendly.
I guess these features are out of scope pagefind, so adding them to product will likely make it more complex

Case:

• Site with multiple pages and a lot content per page (for example, documentation site)

The user inputs data in search and gets one or more results, user clicks on one of the results and page loads.
After that user uses browser search of page and repeats search term from site search input

Is that a way to immediately scroll to part of the page where search input is or/and highlight the text?

The main idea is to remove additional step with browser search

[bglw]

This is a good discussion to have — I haven't decided whether it is in scope or out of scope for Pagefind. It's definitely something we want on our own documentation using Pagefind.

I think the first cut would be a feature where Pagefind can add the search term to the result URL. So the URL for your search result might look like https://pagefind.app/docs/config-sources/?term=command. Then you could add some javascript to the page that tries to find that term and scroll to it.

There are some circumstances not caught by that. If Pagefind does some stemming or fuzzy matching on a word, then it would be hard to replicate that in your own snippets. So with that in consideration, I don't hate the idea of Pagefind providing a utility to help find words on a given page.

No short term plans for this as a feature though, so implementing the ?term feature seems like a good first step 🙂

To completely self-build a cut of this feature, you could use the processResult hook of the Default UI to add the current search term to each result. On the page side, in the past I've used the mark.js package to highlight matching words on the page, which then lets you find and scroll to the first <mark> on the page.

[tenmozes]

I think the first cut would be a feature where Pagefind can add the search term to the result URL. So the URL for your search result might look like https://pagefind.app/docs/config-sources/?term=command. Then you could add some javascript to the page that tries to find that term and scroll to it.

Yeap, this definitely works. Currently we use github pages + jekil (the default solution for github pages). If you do a search by specific criteria and follows suggested search link, you can see the term in query page

example https://docs.victoriametrics.com/?highlight=VictoriaMetrics

No short term plans for this as a feature though, so implementing the ?term feature seems like a good first step 🙂

thank you for a hint, I will include highiting in the end result