<div class="component-section no-code bd-0">
  <h5 id="section6" class="tx-semibold">输入字符实时获取搜索结果</h5>
  <p class="mg-b-25">ajax getSearch 负责触发并返回数据，具体展现位置及形式根据模板设计自由应对</p>
  <header>
    <div class="tt-desctop-parent-search tt-parent-box">
      <div class="tt-search tt-dropdown-obj active">
        <div class="tt-dropdown-menu pos-relative">
          <div class="container">
            <form action="{openzc:link name='FILENAME_INDEX' parameter='[main_page=>advanced_search_result]'/}" method="get">
              <div class="tt-col">
                <!--getSearch事件请求获取数据 重加载到ajax区块‘searchList’-->
                <input type="text" name="keyword" class="tt-search-input openzc-keyup" data-action="getSearch" data-reload="searchList" placeholder="Search Products...">
                <button class="tt-btn-search" type="submit"></button>
              </div>
              
              <div class="tt-info-text"> What are you Looking for? </div>
              <div class="search-results">
                <!--这里创建ajax区块，让每次触发都重新加载该区块-->
                {openzc:ajax filename="searchList"}
                {openzc:if $listCount>0}
                <ul>
                  {openzc:list imgsizer="180,225" pagesize="5"}
                  <li> <a href="[field:products_link/]">
                    <div class="thumbnail"><img src="[field:products_image/]" alt=""></div>
                    <div class="tt-description">
                      <div class="tt-title">[field:products_name/]</div>
                      <div class="tt-price"> <span class="new-price">[field:products_price/]</span> <span class="old-price">[field:products_original_price/]</span> </div>
                    </div>
                    </a> </li>
                  {/openzc:list}
                </ul>
                {else}
                <p>没有匹配的结果！</p>
                {/openzc:if}
                {/openzc:ajax}
                <button type="submit" class="tt-view-all">View all products</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </header>
</div>

<!--引入ajax通用文件openzc.js--> 
<script src="/includes/templates/template_doc/html/modules/assets/js/openzc.js"></script>