Multi input for a DocSearch

[LukyVj]

Hello DocSearch team!
I have a request for you, for a next DocSearch release.

Apparently Algolia Autocomplete is able to do this, it would be amazing to be able to do it for docsearch too.

Such API could do the trick:

docsearch({
  apiKey: 'xxxxxxxxxxxxxxxxxxxxxx',
  indexName: 'xxxxxxxxxxxxx',
  inputSelector: '#searchbox, #searchbox-mobile'
});

Why we need this?

There is a running issue since the begining of DocSearch, and it's the ability of making a responsive version of it.

Because a lot of documentations are made with such structure:

Desktop:

[ Sidebar ] [ Main Content Area ] 
[ Sidebar ] [ Main Content Area ] 
[ Sidebar ] [ Main Content Area ] 
[ Sidebar ] [ Main Content Area ] 

Mobile:

[ Sidebar as navigation] 
[ Main Content Area ] 
[ Main Content Area ] 
[ Main Content Area ] 

This multi input feature would help us making responsive DocSearch implementations, and avoid us to loose time by performing CSS Gymnastic to make sure the input behaviour is still perfect.

[Haroenv]

related parts why it isn't multi-capable yet now:

docsearch/src/lib/DocSearch.js

Lines 168 to 171 in 5afc05e

	static getInputFromSelector(selector) {
	const input = $(selector).filter('input');
	return input.length ? $(input[0]) : null;
	}

docsearch/src/lib/DocSearch.js

Lines 88 to 90 in 5afc05e

	if (enhancedSearchInput) {
	this.input = DocSearch.injectSearchBox(this.input);
	}

docsearch/src/lib/DocSearch.js

Line 92 in 5afc05e

this.autocomplete = autocomplete(this.input, autocompleteOptions, [

docsearch/src/lib/DocSearch.js

Line 108 in 5afc05e

this.handleShown.bind(null, this.input)

Seems like it's feasible by editing those.

@LukyVj I could see as a workaround instantiating docsearch twice with both inputs; and disable one of both, maybe just with css

[LukyVj]

So, as mentionned, I will not spend hours doing CSS gymnastic, so after seeing this with Maxime, indeed the best option is a double instance.

The multi input is definitely feasible on a next release :) This issue is just a reference for us, and our customers :)

Thanks Haroen.

[Haroenv]

I know, I just looked into the parts that should be changed, in case we decide to actually change this behaviour 😄

[pixelastic]

Thanks for looking into this. This would indeed be very helpful.

Multi-instances of DocSearch on the same page already have some limitations and config leaking, we need to fix that in the next version.

[pixelastic]

@s-pace This is not really fixed, I would keep it open. Today, even with two instances running, some config is leaked from one instance to the other, meaning you cannot have two DocSearch running with different config.

[s-pace]

Good catch. I do not think we want to solves this issue in short term

[pixelastic]

Nope, but let's keep it open with the v3 tag. That's a long-standing that will need a big rewrite, so it can wait until v3.

[s-pace]

Will doable thanks to the v3 (beta so far)

[mhansen]

Will doable thanks to the v3 (beta so far)

Does this mean we can use multiple text boxes in DocSearch v3?

https://docsearch.algolia.com/docs/api/#container says

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.

Implying, maybe no?

Or is it encouraged in v3 to call docsearch() multiple times with multiple selectors?

(Context: google/docsy#739, and trying to add DocSearch to www.graphviz.org: https://gitlab.com/graphviz/graphviz.gitlab.io/-/issues/120)

[shortcuts]

Does this mean we can use multiple text boxes in DocSearch v3?

DocSearch v3 is fully responsive, we shouldn't need to handle multiple containers. You can try it on our documentation: https://docsearch.algolia.com/

I think we can close this issue to avoid confusion between v2 and v3.

[mhansen]

Ok. I’m not talking about multiple containers here though, I’m wondering how I can adapt a site that had multiple search boxes (different DOM for different breakpoints) to use DocSearch. Perhaps I should open a new issue?

…

On Fri, 22 Oct 2021 at 19:14, Clément Vannicatte ***@***.***> wrote: Does this mean we can use multiple text boxes in DocSearch v3? DocSearch v3 is fully responsive, we shouldn't need to handle multiple containers. You can try it on our documentation: https://docsearch.algolia.com/ I think we can close this issue to avoid confusion between v2 and v3. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#230 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAZYOOV43QMPRCUCJE2C4DUIEMPDANCNFSM4ECN3N2Q> .

[shortcuts]

I’m wondering how I can adapt a site that had multiple search boxes (different DOM for different breakpoints) to use DocSearch.

If the goal is to target multiple Algolia indices, this is indeed something we would like to add to DocSearch v3! Are the searchboxes you are referring to the ones on https://graphviz.org/?

Perhaps I should open a new issue?

Yes, please.