@customSearchInput global variable
Some of the Publii search plugins generates search input field. In order to properly handle this feature you must implement two changes in your theme:
1. Add support for customSearch
Just add customSearch
under your theme supportedFeatures section.
2. Implement @customSearchInput global variable
In the simplest for you must just add the following code in your theme:
{{{@customSearchInput}}}
For example our Simple theme implements this feature in the following way:
{{#if @config.custom.searchFeature}}
<div class="search">
<div class="search__overlay js-search-overlay">
<div class="search__overlay-inner">
{{{@customSearchInput}}}
<button class="search__close js-search-close" aria-label="{{ translate 'search.close' }}">
{{ translate 'search.close' }}
</button>
</div>
</div>
<button class="search__btn js-search-btn" aria-label="{{ translate 'search.search' }}">
<svg role="presentation" focusable="false">
<use xlink:href="{{@website.assetsUrl}}/svg/svg-map.svg#search"/>
</svg>
</button>
</div>
{{/if}}
It uses additional UI which can be handled with some of the search plugins.