Algolia: Search integration only works on full-width searchbox, not on narrow pages

[mhansen]

Hi there, I just integrated Algolia DocSearch v2 on www.graphviz.org, but I'm having some trouble.

The search works for the full-width page, where search is at the top right (note there are search results):

But it doesn't work if the page is a little narrower, and the searchbox moves to above the sidenav (note no search results):

Nor do I get any results for the narrowest width:

And if I press enter it takes me to /?q=attrs, which 404s:

Here's my config:

<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
  docsearch({
    // Your Search API Key
		apiKey: '647a549eb545415b94423d1dd2f17c07',
    // The index populated by the DocSearch scraper
		indexName: 'graphviz',
    // Your Algolia Application ID
		appId: 'BH4D9OD16A',
    // Replace inputSelector with a CSS selector
    // matching your search input
    inputSelector: '.td-search-input',
    // Set debug to true to inspect the dropdown
    debug: true,
  });
</script>

My guess is the event handlers are only being attached to a single .td-search-input element, but we have multiple of them. Let's check:

The full-width searchbox has event listeners:

The medium-width searchbox has no event listeners:

Nor does the smallest-width searchbox:

So I think the practice of having multiple search boxes for responsive design isn't working well with DocSearch. Maybe we need to rethink how this integration works. Possibly we could move to DocSearch v3 at the same time (#738).

algolia/docsearch#230 seems to be the same issue on DocSearch's repo. I'm not clear if algolia/docsearch#230 (comment) means this is doable in v3 or not.

[mhansen]

It kinda sounds like from v3's reference docs, like it only works with one input box: https://docsearch.algolia.com/docs/api/#container

The container for the DocSearch search box. You can either pass a CSS selector or an Element. If there are several containers matching the selector, DocSearch picks up the first one.

[mhansen]

I just realised maybe this is why you encourage setting

sidebar_search_disable = true

To avoid having multiple search elements.

I set that, and I'm still getting all the search elements in the screenshots above.

[mhansen]

The algolia branch of Graphviz is up here: https://gitlab.com/markhnsn/graphviz.gitlab.io/-/commits/algolia if it would help to reproduce.

[LisaFC]

Ok that's weird, it should work fine if you don't have the sidebar search enabled. Let me do some investigating.

[mhansen]

Cross-referencing bugs: I have filed algolia/docsearch#1109 on DocSearch to ask for their help too.

[okohll]

I too have sidebar_search_disable = true under [params.ui] in the config.toml, yet the search box appears at the top of the left sidebar if you narrow the browser window a bit. An annoying side-effect is that with the browser full width and therefore no search box in the sidebar, there is an empty space at the bottom of the sidebar which you can't scroll. In other words, when the sidebar search box disappears, the rest of the sidebar content moves up, leaving a gap at the bottom which is then useless - in fact in some circumstances it looks like there isn't any more content in the sidebar when there actually is.

Hopefully if this issue is fixed, it will resolve that problem too.

[chalin]

We're migrating to Algolia Search v3 via #985, and besides, the Graphviz website seems to be using Lunr now, so I'll close this issue. @mhansen - if you feel that it is still relevant, let us know.