Create a 'search field' component for themes

[timhoffm]

Feature or Bugfix

• Feature. Closes Remove heading from search box in sphinx13 style #10791.

Purpose

searchfield.html is similar to the existing searchbox.html, but does not have the heading "Quick Search". Instead, it uses "Search" as a placeholder text. This gives a cleaner and less cluttered appearance.

Before:

After:

Detail

The searchfield component is added to the basic theme and thus can be used in any derivative theme. It is not used by default for backward compatibility. Also searchbox.html was deliberately not modified for backward compatibility.

The searchfield component is made the default in the new sphinx13 theme.

CSS adaptions ensure that the top of the search field is aligned with the top of the main content.

[mgeier]

Please note that the searchbox also has a "Hide Search Matches" feature:

sphinx/sphinx/themes/basic/static/sphinx_highlight.js

Lines 99 to 110 in cc314f1

	const searchBox = document.getElementById("searchbox");
	if (searchBox === null) return;
	searchBox.appendChild(
	document
	.createRange()
	.createContextualFragment(
	'<p class="highlight-link">' +
	'<a href="javascript:SphinxHighlight.hideSearchWords()">' +
	_("Hide Search Matches") +
	"</a></p>"
	)
	);

You might want to duplicate this for your searchfield.

Alternatively, you might be able to just re-use the #searchbox ID, which would give you this feature for free.

[timhoffm]

Thanks for the feedback. I've gone back to #searchbox, which seems more robust compared to duplicating style and logic.

[timhoffm]

Ping @mgeier. I've addressed your comment and believe this is ready to go.

[mgeier]

Yes, thanks, my comment has been fully addressed.

However, I'm not the right person to approve or reject this PR as a whole.

[timhoffm]

ping @AA-Turner. You approved the fundamental idea in #10791 (comment). Would you be willing to review? Thanks.

[AA-Turner]

Thanks!

A