searchBar
搜索栏,类似于微信原生的搜索栏,应用于常见的搜索场景。
详细的代码结构如下:
- <div class="weui-search-bar" id="search_bar">
- <form class="weui-search-bar__form">
- <div class="weui-search-bar__box">
- <i class="weui-icon-search"></i>
- <input type="search" class="weui-search-bar__input" id="search_input" placeholder="搜索" />
- <a href="javascript:" class="weui-icon-clear" id="search_clear"></a>
- </div>
- <label for="search_input" class="weui-search-bar__label" id="search_text">
- <i class="weui-icon-search"></i>
- <span>搜索</span>
- </label>
- </form>
- <a href="javascript:" class="weui-search-bar__cancel-btn" id="search_cancel">取消</a>
- </div>
- <div class="weui-cells weui-cells_access search_show" id="search_show">
- <div class="weui-cell">
- <div class="weui-cell__bd weui-cell_primary">
- <p>实时搜索文本</p>
- </div>
- </div>
- <div class="weui-cell">
- <div class="weui-cell__bd weui-cell_primary">
- <p>实时搜索文本</p>
- </div>
- </div>
- <div class="weui-cell">
- <div class="weui-cell__bd weui-cell_primary">
- <p>实时搜索文本</p>
- </div>
- </div>
- <div class="weui-cell">
- <div class="weui-cell__bd weui-cell_primary">
- <p>实时搜索文本</p>
- </div>
- </div>
- </div>