search.html

{% from "partials/icon.html" import icon %}
<div id="docs-search" class="md-search" data-md-component="search" role="dialog" aria-modal="true" aria-label="Search documentation">
  <label class="md-search__overlay" for="__search" aria-label="Close search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
      <input type="text" class="md-search__input" name="query" aria-label="{{ lang.t('search.placeholder') }}" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
      <label class="md-search__icon md-icon" for="__search" aria-label="Close search">
        {{ icon("search-outline") }}
        {{ icon("arrow-back-outline") }}
      </label>
      <nav class="md-search__options" aria-label="{{ lang.t('search') }}">
        {% if "search.share" in features %}
          <a href="javascript:void(0)" class="md-search__icon md-icon" title="{{ lang.t('search.share') }}" aria-label="{{ lang.t('search.share') }}" data-clipboard data-clipboard-text="" data-md-component="search-share" tabindex="-1">
            {{ icon("share-social-outline") }}
          </a>
        {% endif %}
        <button type="reset" class="md-search__icon md-icon" title="{{ lang.t('search.reset') }}" aria-label="{{ lang.t('search.reset') }}" tabindex="-1">
          {{ icon("close-outline") }}
        </button>
      </nav>
      {% if "search.suggest" in features %}
        <div class="md-search__suggest" data-md-component="search-suggest"></div>
      {% endif %}
    </form>
    <p class="docs-search-hint" aria-live="polite">
      <span><kbd>→</kbd> Accept suggestion</span>
      <span><kbd>Enter</kbd> Open</span>
      <span class="docs-search-hint__close"><kbd>Esc</kbd> Close</span>
    </p>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
        <div class="md-search-result" data-md-component="search-result">
          <div class="md-search-result__meta" role="status" aria-live="polite" aria-atomic="true">
            {{ lang.t("search.result.initializer") }}
          </div>
          <ol class="md-search-result__list"></ol>
        </div>
      </div>
    </div>
  </div>
</div>