`searchBar` 搜索栏,类似于微信原生的搜索栏,应用于常见的搜索场景。
![image](https://cloud.githubusercontent.com/assets/4933537/13345763/65108f90-dc9c-11e5-9895-e195b1b441c5.jpg)
![image](https://cloud.githubusercontent.com/assets/4933537/13346445/3c5bb44e-dca1-11e5-8023-e78c7f7dbd3f.jpg)
详细的代码结构如下:
~~~
<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>
~~~