Display search query in URL

[xplosionmind]

Hi all!

I would like to exploit Pagefind also from the search page URL.

An explanatory example: when I visit the search page of Eleventy’s documentation, while I type the search query the URL is automatically updated. If I search “if”, the page URL becomes: https://www.11ty.dev/docs/search/?q=if.

Is there a way I could make Pagefind on my website do the same?

[nhoizey]

You can use processTerm:

processTerm: function (term) {
  history.replaceState({}, "", `?q=${encodeURIComponent(term)}`);
  return term;
},

[nhoizey]

@xplosionmind if you add the query string to the URL, you should also use it to run the search when arriving on the page.

Here's how I did it on my search page:

const params = new URLSearchParams(window.location.search);
if (params.has('q')) {
  search_ui.triggerSearch(params.get('q'));
}

My full code here: https://github.com/nhoizey/nicolas-hoizey.photo/blob/main/src/search/index.njk

[xplosionmind]

Thanks a lot, @nhoizey! Your search page code was super useful and insightful.

[xplosionmind]

@nhoizey do you have any idea how I can also include filters in the URL?

[nhoizey]

@xplosionmind you can't right now, but you can add your vote to this issue I opened a few weeks ago: #588