搜索 Search

搜索模板支持搜索历史、搜索结果列表、清空历史、自动显示隐藏搜索按钮等动态效果。

示例代码

<style>
  .aui-header-title{display: flex; align-items: center; right: 60px;}
  .aui-header-right{width: 60px;}
  .aui-header-right-text{font-size: 16px; color: #FFF;}
  .aui-header-search{width: 100%; height: 34px; overflow: hidden; border-radius: 30px; background: #FFF; display: flex; align-items: center;}
  .aui-header-search .iconsearch{width: 30px; height: 100%; line-height: 34px; font-size: 16px; color: #aaa; position: relative; left: 2px;}
  .aui-header-search #search-form{width: -webkit-calc(100% - 30px - 10px); width: calc(100% - 30px - 10px); height: 100%;}
  .aui-header-search #search{width: 100%; height: 100%; display: flex; align-items: center; font-size: 15px; color: #333; border: none;}
  .aui-header-search #search::-webkit-input-placeholder{color: #aaa;}
  .aui-header-search #search::-webkit-textfield-decoration-container{position: relative; top: -1px;}
  .aui-header-search #search[type="search" i]::-webkit-search-cancel-button{-webkit-appearance: none; position: relative; top: 1px; height: 20px; width: 20px; border-radius: 50%; background :#EBEBEB url("../../../static/img/clear.png") no-repeat center; background-size: 14px 14px; }
</style>
<header class="aui-header">
  <a class="aui-header-left" onclick="aui.closeWin()">
    <i class="iconfont iconreturn"></i>
  </a>
  <div class="aui-header-title">
    <div class="aui-header-search">
      <i class="iconfont iconsearch"></i>
      <form target="frameFile" id="search-form" onsubmit="search()">
        <input type="search" name="search" id="search" placeholder="大家都在搜:2019退役球星" value="" />
      </form>
    </div>
  </div>
  <div class="aui-header-right" onclick="search()">
    <span class="aui-header-right-text">搜索</span>
  </div>
</header>