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)