Multiple search boxes

[sbxchicago]

Is it possible to include multiple search boxes?

Currently we're attempting to use the material nav at mobile sizes and a custom header for larger viewports. We're including search with:

{% include "partials/search.html" %}

But, the two boxes seem to trip over each other. Any help is greatly appreciated, thanks!

[squidfunk]

This should work in theory. The application will mount the search component for all elements that define the data-md-component=search attribute, so multiple boxes should be possible to set up:

mkdocs-material/src/assets/javascripts/bundle.ts

Lines 232 to 234 in 3dd6139

	/* Search */
	...getComponentElements("search")
	.map(el => mountSearch(el, { index$, keyboard$ })),

However, you might need to apply additional CSS to achieve exactly what you want. This is the only guidance I can give you, given that the only information I have is "But, the two boxes seem to trip over each other.".

[sbxchicago]

Thanks for the response. I can provide more details.

Both search boxes mount, but the dropdown of search results only appears on the mobile menu, that is the straightforward material provision.

Additionally, when the mobile search box is open and an entry has been provided in the desktop box, the desktop entry appears as the default text in the mobile search . When you type a new query into the mobile search, the desktop entry remains greyed out behind the new entry.

Any help is greatly appreciated!