html 通用搜索标记

Posted 2021-05-11

<!-- Search Form -->  
<form id="searchform" class="searchform" name="searchform">  
  <input type="text" class="search_input" />
  <button type="submit" class="search-button">
    <span class="icon icon-search"></span>
  </button>
</form>

<!-- Search Result Modal -->  
<div id="modal-search">  
  <div class="modal">
    <header class="modal-header clearfix">
      <form id="modal-searchform" class="searchform" name="modal_searchform">
        <input type="text" class="search_input" />
        <button type="submit" class="search-button">
            <span class="icon icon-search"></span>
          </button>
      </form>
      <a class="close">
        <span class="icon icon-close"></span>
      </a>
    </header>
    <main class="modal-body">
      <ul class="results ajax-content" id="modal-search-results">
        <!-- The result list will fill in here -->
      </ul>
    </main>
    <footer class="modal-footer ajax-content clearfix">
      <div class="meta">
        <strong class="range"></strong> of <strong class="total"></strong>
      </div>
      <div class="error"></div>
      <a class="nav next">
        <span class="text">NEXT</span>
        <span class="icon icon-chevron-right"></span>
      </a>
      <a class="nav prev">
        <span class="icon icon-chevron-left"></span>
        <span class="text">PREV</span>
      </a>
    </footer>
  </div>
  <div class="overlay"></div>
</div>