Auto-focus Algolia search box on page load when there's a query parameter

[jimjam-slam]

Description

I love Quarto's built-in search, but one thing I thought it was missing was the ability to operate it externally. For example, many browsers have a custom search engine feature whereby you can save example.com/search?q=%s and then use some hotword to trigger filling a query into that URL template.

I started whipping up a small extension to rectify that — not a full-featured search route, just a JS filter to patch the URL query parameter over to the existing Algolia search box.

However, having a look at the Quarto source, I realised that Quarto (or autocomplete) already populates the search box if there's a q parameter. In fact, all that's left to do is click the search button (if the textbox is hidden by configuration or page size) and then focus the text box!

Before I put this (now extremely small 😆) extension out there, I just wanted to check that this last piece of functionality wasn't already built into Quarto. I can't find any mention of it in the docs — was there an intention to allow the search box to be pre-filled on page load?

Thanks!

[mcanouil]

It's likely a missing configuration https://www.algolia.com/doc/

Probable:

• https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/vue/

[mcanouil]

Finally, it's also possible to update the configuration to syncrhonise the search query back into the URL and if we disable the resetHighlighting() function we get the following behaviour.

Screen.Recording.2025-07-24.at.10.59.18.mov

[mcanouil]

TL;DR

• I would fix the highlighting and synchronise search with the query URL.
• I wouldn't open the search box automatically.

[jimjam-slam]

Super interesting, @mcanouil! I'd love to know what purpose the highlighting serves, since deep links are now pretty well supported across browsers.

That said, I was intending for this filter to be enabled on a single page that is otherwise blank, like search.qmd, rather than have it be enabled by default on every page of a site. It'd ultimately be up to users, but that's the recommendation I'd make to avoid the highlighting issues!

I'm not sure why the query parameter disappears on a test quarto create website but not on [quarto.org](http://quarto.org) — maybe that's configuration specific. As you note, getting it back in the URL would be good (although I'd prefer not to be messing with user history ideally). So far I'm testing the following, and that successfully brings up the search box at least:

const windowURL = (new URL(window.location));
const query = windowURL.searchParams.get("q");
  if (query) {
    document.addEventListener("DOMContentLoaded", () => {
      window.quartoOpenSearch();
      // NOTE - could inject query param back in here
    });
  }

(This is all talking from the perspective of an extension developer, of course, not the team!)

EDIT: ahh, I see what you mean observing the video, @mcanouil — the search query that led someone to click on a search result is carried through to the next page as the query parameter.

[mcanouil]

(converting as a feature request for an enhancement)

[jtbayly]

@jimjam-slam said: “I'd love to know what purpose the highlighting serves, since deep links are now pretty well supported across browsers.”

I think the real benefit is that it is often the case that there are multiple instances of the search term on the page. Why force people to back and search for the same term and find the next instance of that term (or switch to using their browser search to re-search for their term on page? Just highlight all instances of the term. That’s my vote, anyway, because it’s a very useful feature when it works that way on long pages with multiple results. And it doesn’t hurt anything on short pages with one result.