mediawiki-skins-Vector/includes/templates/SearchBox.mustache
jdlrobson caed16e26f Allow multiple search components on the same page
Styling should not depend on IDs to allow us to have multiple
searches in the page.

Precursor for wiring up search in the sticky header.

This also tweaks performance metrics to track separate metrics
for the sticky header search

Change-Id: I5b4192a8f5a9f95af26c1faf904f7cc994323518
2021-09-23 23:23:58 +00:00

40 lines
1.8 KiB
Plaintext

{{!
See @typedef SearchData
}}
<div {{#is-primary}}id="p-search"{{/is-primary}} role="search" class="{{class}} vector-search-box">
<div>
{{#is-legacy}}
<h3 {{{html-user-language-attributes}}}>
<label {{#is-primary}}for="searchInput"{{/is-primary}}>{{msg-search}}</label>
</h3>
{{/is-legacy}}
<form action="{{form-action}}" id="{{form-id}}"
class="vector-search-box-form">
<div {{#is-primary}}id="simpleSearch"{{/is-primary}}
class="vector-search-box-inner"
{{#input-location}} data-search-loc="{{.}}"{{/input-location}}>
<input class="vector-search-box-input"
{{{html-input-attributes}}} {{#is-primary}}id="searchInput"{{/is-primary}} />
<input type="hidden" name="title" value="{{page-title}}"/>
{{! We construct two buttons (for 'go' and 'fulltext' search modes), but only one will be
visible and actionable at a time (they are overlaid on top of each other in CSS).
* Browsers will use the 'fulltext' one by default (as it's the first in tree-order),
which is desirable when they are unable to show search suggestions (either due to being
broken or having JavaScript turned off).
* The mediawiki.searchSuggest module, after doing tests for the broken browsers, removes
the 'fulltext' button and handles 'fulltext' search itself; this will reveal the 'go'
button and cause it to be used. !}}
<input {{#is-primary}}id="mw-searchButton"{{/is-primary}}
{{{html-button-fulltext-attributes}}} value="{{msg-searchbutton}}" />
<input {{#is-primary}}id="searchButton"{{/is-primary}}
{{{html-button-go-attributes}}} value="{{msg-searcharticle}}" />
</div>
</form>
</div>
{{#is-collapsible}}
{{#data-collapse-icon}}
{{>Button}}
{{/data-collapse-icon}}
{{/is-collapsible}}
</div>